body { 
  font-family: 'Segoe UI', Arial, sans-serif; 
  margin: 0; 
  padding: 0; 
  background: linear-gradient(135deg, #f8fafc 0%, #e8f4f8 100%);
}

/* MasterChoice Retail - Elegant Porcelain-Inspired Theme */
:root {
  --mc-primary: #2563a8;      /* Royal blue - porcelain inspired */
  --mc-secondary: #4a90c2;    /* Lighter blue accent */
  --mc-dark: #1e3a5f;         /* Deep navy */
  --mc-light: #f0f6fa;        /* Soft porcelain white */
  --mc-cream: #fafcfd;        /* Cream white */
  --mc-gold: #c9a962;         /* Gold accent - heritage feel */
  --mc-border: #d4e5f0;       /* Soft blue border */
}

/* Header styling */
h2 {
  color: var(--mc-dark);
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

/* Subtle decorative pattern overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(37, 99, 168, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 168, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.tabs {
  width: 100%;
}

/* Hide radio buttons */
.tabs input[type="radio"] {
  display: none;
}

/* Style tab labels - elegant porcelain style */
.tabs label {
  display: inline-block;
  padding: 14px 26px;
  background: linear-gradient(180deg, var(--mc-dark) 0%, #152d4a 100%);
  color: #fff;
  cursor: pointer;
  margin-right: 3px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid transparent;
  border-bottom: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
}

/* Gold accent line on tabs */
.tabs label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--mc-gold);
  transition: width 0.3s ease;
}

/* Active tab label */
.tabs input[type="radio"]:checked + label {
  background: linear-gradient(180deg, var(--mc-primary) 0%, #1e4d7a 100%);
  color: #fff;
  border-color: var(--mc-border);
  box-shadow: 0 -2px 10px rgba(37, 99, 168, 0.2);
}

.tabs input[type="radio"]:checked + label::after {
  width: 60%;
}

/* Hover effect */
.tabs label:hover {
  background: linear-gradient(180deg, var(--mc-secondary) 0%, var(--mc-primary) 100%);
  transform: translateY(-2px);
}

/* Hide all tab content by default */
.tab-content {
  display: none;
  padding: 25px;
  background: var(--mc-cream);
  border-top: 4px solid var(--mc-primary);
  box-shadow: 
    inset 0 5px 15px rgba(37, 99, 168, 0.05),
    0 2px 10px rgba(0,0,0,0.05);
  position: relative;
}

/* Decorative corner accents */
.tab-content::before,
.tab-content::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--mc-border);
  opacity: 0.5;
}

.tab-content::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.tab-content::after {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
}

/* Show content of checked tab */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6,
#tab7:checked ~ #content7,
#tab8:checked ~ #content8,
#tab9:checked ~ #content9,
#tab10:checked ~ #content10,
#tab11:checked ~ #content11,
#tab12:checked ~ #content12,
#tab13:checked ~ #content13 {
  display: block;
}

.iframes-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  resize: both;
  overflow: auto;
}

.iframes-row iframe {
  border: 2px solid var(--mc-border);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(37, 99, 168, 0.1);
}

/* Responsive for small screens */
@media (max-width: 1000px) {
  .iframes-row {
    flex-direction: column;
  }
  .iframes-row iframe {
    width: 100%;
    max-width: 100%;
  }
}