/**
 * eSIM Package Page Styles
 * Extracted from esim-package-page.html design mockup
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f0f2f8;
    color: #1a1d23;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== LAYOUT ===== */
.page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* ===== TOP CARD ===== */
.top-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    margin-bottom: 24px;
}
@media (max-width: 560px) {
    .top-card { grid-template-columns: 1fr; }
}

.product-image-col {
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 24px;
    gap: 16px;
    background: white; border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.esim-icon-box {
    width: 120px; height: 120px;
    background: linear-gradient(135deg, #4f6ef7, #6b8afb);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
}
.product-title { font-size: 18px; font-weight: 700; text-align: center; color: #111; }
.product-subtitle { font-size: 13px; color: #888; text-align: center; margin-top: 4px; }

.selectors-col {
    padding: 20px;
    display: flex; flex-direction: column; gap: 20px;
    background: white; border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-label {
    font-size: 13px; font-weight: 600; color: #111;
    margin-bottom: 12px;
}

/* Bundle Selection Styles */
.esim-product-page .bundle-list { display: flex; flex-direction: column; gap: 10px; }
.esim-product-page .bundle-btn {
    border: 1.5px solid #e0e2e8;
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    background: white;
    transition: all 150ms;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}

ol{
    padding-top: 10px;
    padding-bottom: 10px;
}

ol > li {
    margin-top: 5px;
    margin-bottom : 5px;
}

h4 > span {
    margin-right: 2px;
}

.esim-product-page .bundle-btn:hover { border-color: #4f6ef7; }
.esim-product-page .bundle-btn.selected {
    border-color: #4f6ef7;
    box-shadow: 0 4px 12px rgba(79, 110, 247, 0.1);
    border: 2px solid var(--brand-blue) !important;
    background-color: #eff6ff; /* Very light blue tint */
}

.esim-product-page .bundle-info .name { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 8px; display: block; }
.esim-product-page .bundle-specs { display: flex; flex-direction: column; gap: 4px; }
.esim-product-page .spec-item { display: flex; align-items: center; font-size: 12px; color: #555; gap: 6px; }
.esim-product-page .spec-item svg { color: #4f6ef7; }

.esim-product-page .bundle-price { text-align: right; }
.esim-product-page .price-val { font-size: 18px; font-weight: 800; color: #111; display: block; }
.esim-product-page .popular-badge {
    position: absolute; top: -10px; left: 16px;
    background: #f59e0b; color: white;
    font-size: 10px; font-weight: 800;
    padding: 2px 8px; border-radius: 20px;
}

/* Total Price box */
.esim-product-page .total-price-box {
    background: linear-gradient(135deg, #4f6ef7, #6b4fde);
    border-radius: 12px;
    padding: 16px;
    color: white;
}
.esim-product-page .total-label { font-size: 12px; opacity: 0.8; margin-bottom: 2px; }
.esim-product-page .total-amount { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.esim-product-page .total-details { font-size: 12px; opacity: 0.85; margin-bottom: 12px; }
.esim-product-page .btn-add-cart {
    width: 100%;
    background: white;
    color: #4f6ef7;
    border: none; border-radius: 8px;
    padding: 12px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms;
}

/* Common Section Cards */
.section-card {
    background: white; border-radius: 16px;
    padding: 24px; margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.section-title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 16px; }

.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .included-grid { grid-template-columns: 1fr; } }

.included-item {
    border: 1px solid #e8eaf0; border-radius: 10px;
    padding: 12px; display: flex; gap: 10px; align-items: flex-start;
}
.inc-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px; color: white;
}
.inc-title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 2px; }
.inc-desc  { font-size: 12px; color: #666; }

/* Note/Steps Lists */
.list-item { display: flex; gap: 10px; margin-bottom: 8px; font-size: 12px; line-height: 1.5; color: #555; }
.list-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: #4f6ef7; color: white;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.note-bg { background: #fffbeb; padding: 12px; border-radius: 8px; border: 1px solid #fef3c7; }

/* Coverage */
.coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 480px) { .coverage-grid { grid-template-columns: repeat(2, 1fr); } }
.coverage-tag { font-size: 12px; color: #444; display: flex; align-items: center; gap: 4px; }
.coverage-tag::before { content: "✓"; color: #22c55e; font-weight: bold; }

.info-item { margin-bottom: 14px; }
.info-item-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.info-item-desc { font-size: 12px; color: #555; line-height: 1.6; }

.bg-green-600 {
    background-color: var(--color-green-600);
}

.bg-gray-900 {
    background-color: var(--color-gray-900);
}

.bg-gray-50 {
    background-color: var(--color-gray-50);
}

.rounded-lg {
    border-radius: var(--radius);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.items-start {
    align-items: flex-start;
}

.flex {
    display: flex;
}

.bg-blue-50 {
    background-color: var(--color-blue-50);
}

.border-blue-200 {
    border-color: var(--color-blue-200);
}

.text-white {
    color: #ffffff;
}

.mr-2 {
    margin-right: calc(var(0.25rem) * 2);
}


:root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-900: oklch(21% .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --brand-blue: #3b82f6;
    --popular-orange: #f97316;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-relaxed: 1.625;
    --radius: .625rem;
    --radius-xs: .125rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
: var(--font-mono);
    --color-border: var(--border);
}

:root {
    font-synthesis: none;
}

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    --tw-font-weight : var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.w-8 {
    width: calc(var(--spacing) * 8);
}

.h-8 {
    height: calc(var(--spacing) * 8);
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

/* Color coding for specific spec types */
.spec-item.spec-duration svg { color: #4f6ef7; } /* Blue */
.spec-item.spec-data svg { color: #10b981; }     /* Green */
.spec-item.spec-voice svg { color: #f59e0b; }    /* Orange */
.spec-item.spec-bonus svg { color: #8b5cf6; }    /* Purple */

.spec-item span {
    line-height: 1.2;
}

/* Unified Icon Styling */
.lucide-icon {
    color: var(--brand-blue); /* All icons are the same blue in the screenshot */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-sm svg { width: 14px; height: 14px; stroke-width: 2.5px; }

/* Popular Badge */
.popular-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--popular-orange);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Checkmark on the right */
.select-check {
    color: var(--brand-blue);
    margin-top: 4px;
}

/* Bottom Total Box */
.total-price-box {
    background: var(--brand-blue); /* Solid blue as per screenshot */
    border-radius: 12px;
    padding: 20px;
    color: white;
}