/* =====================================================
   SAMPARK BRAND THEME - Light Orange
   ===================================================== */
:root {
    --brand-primary: #FF7A33;
    --brand-primary-dark: #E85D04;
    --brand-light: #FFF3E9;
    --brand-dark-text: #1F2937;
    --brand-muted: #6B7280;
}

body { font-family: 'Segoe UI', Arial, sans-serif; color: var(--brand-dark-text); }

/* Placeholder / hint text - deliberately light and clearly distinct from
   real typed content, everywhere in the app. Without this, browsers
   render placeholder text dark enough to look like an already-filled
   field, which is exactly the confusion this fixes. */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
    color: #ABB3BF;
    opacity: 1;
}

/* ---------------------------------------------------
   Brand colour overrides - applied across the whole app
   (admin panel, exhibitor panel, and public pages) so the
   product looks consistent everywhere, not just on the
   marketing pages.
   --------------------------------------------------- */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
a { color: var(--brand-primary-dark); }
a:hover { color: var(--brand-primary); }

/* Admin sidebar layout */
.sidebar {
    width: 262px;
    min-height: 100vh;
    position: sticky;
    top: 0;
}
.sidebar .nav-link {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar .nav-link.active {
    background-color: #1F2937;
}
.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
}
.sidebar-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.45);
    padding: 0.4rem 0.75rem 0.3rem;
}
.sidebar-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.sidebar-section-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-section-toggle .toggle-chevron { transition: transform 0.2s ease; font-size: 0.75rem; }
.sidebar-section-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); }
.star-toggle {
    background: none; border: none; color: rgba(255,255,255,0.3);
    padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer;
    flex-shrink: 0;
}
.star-toggle:hover { color: #FCD34D; }
.star-toggle .bi-star-fill { color: #FCD34D; }
main { min-height: 100vh; }

@media (max-width: 768px) {
    .sidebar { width: 70px; }
    .sidebar h5, .sidebar .nav-link span, .sidebar-section-label, .sidebar-section-toggle span, .sidebar-section-toggle .toggle-chevron, .star-toggle { display: none; }
    .sidebar-section-toggle { justify-content: center; }
}

/* Public exhibitor profile page */
.profile-hero {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 0 0 1rem 1rem;
}
.profile-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-bottom: 0.75rem;
}
.stat-card {
    border-radius: 0.75rem;
}

/* Keep printed QR pages ink-friendly */
@media print {
    .no-print { display: none !important; }
}

/* =====================================================
   MARKETING SITE - Landing & Contact pages
   ===================================================== */
.brand-navbar {
    background: #fff;
    border-bottom: 1px solid #f0e4da;
    padding: 0.75rem 0;
}
.brand-navbar .navbar-brand img { height: 42px; }
.brand-navbar .nav-link {
    color: var(--brand-dark-text);
    font-weight: 500;
    margin: 0 0.15rem;
    white-space: nowrap;
}
.brand-navbar .nav-link:hover { color: var(--brand-primary); }
.brand-navbar .btn-login {
    background-color: var(--brand-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}
.brand-navbar .btn-login:hover { background-color: var(--brand-primary-dark); color: #fff; }
.brand-navbar .btn-brand.btn-sm { white-space: nowrap; padding: 0.5rem 1.1rem; }

.hero-section {
    background: linear-gradient(180deg, var(--brand-light) 0%, #ffffff 100%);
    padding: 4rem 0 3rem;
}
.hero-section h1 {
    font-weight: 800;
    font-size: 2.6rem;
    color: var(--brand-dark-text);
}
.hero-section h1 .highlight { color: var(--brand-primary); }
.hero-section p.lead-text {
    color: var(--brand-muted);
    font-size: 1.1rem;
}
.badge-pill-soft {
    background-color: var(--brand-light);
    color: var(--brand-primary-dark);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-block;
}
.btn-brand {
    background-color: var(--brand-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 0.6rem;
    padding: 0.7rem 1.5rem;
}
.btn-brand:hover { background-color: var(--brand-primary-dark); color: #fff; }
.btn-brand-outline {
    background-color: #fff;
    border: 1.5px solid var(--brand-primary);
    color: var(--brand-primary-dark);
    font-weight: 600;
    border-radius: 0.6rem;
    padding: 0.7rem 1.5rem;
}
.btn-brand-outline:hover { background-color: var(--brand-light); color: var(--brand-primary-dark); }

.feature-card {
    border: 1px solid #f0e4da;
    border-radius: 1rem;
    padding: 1.6rem;
    height: 100%;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
    box-shadow: 0 10px 25px rgba(232, 93, 4, 0.08);
    transform: translateY(-3px);
}
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.8rem;
    background: var(--brand-light);
    color: var(--brand-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.steps-section { background: var(--brand-light); padding: 3.5rem 0; }
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.cta-banner {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    border-radius: 1.2rem;
    padding: 3rem 2rem;
    text-align: center;
}
.cta-banner .btn-light { font-weight: 700; border-radius: 0.6rem; }

.brand-footer {
    background: #1F2937;
    color: #cbd5e1;
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.brand-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.brand-footer a { color: #cbd5e1; text-decoration: none; }
.brand-footer a:hover { color: var(--brand-primary); }
.brand-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
    padding-top: 1.2rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
.brand-footer .disclaimer {
    font-size: 0.8rem;
    color: #64748b;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 1.2rem;
    padding-top: 1.2rem;
}

/* Contact page */
.contact-card {
    border: 1px solid #f0e4da;
    border-radius: 1rem;
    padding: 1.6rem;
    background: #fff;
    height: 100%;
}
.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.7rem;
    background: var(--brand-light);
    color: var(--brand-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

/* Custom contained dropdown - replaces native <select> on the visitor
   form so long option lists (State/UT, Industry, etc.) open as a small
   scrollable panel right under the field instead of taking over the
   entire mobile screen, which is what native <select> does on phones. */
.custom-select-wrapper { position: relative; }
.native-select-hidden { display: none; }
.custom-select-display {
    cursor: pointer;
    background-color: #fff;
    user-select: none;
}
.custom-select-display.placeholder { color: #6c757d; }
.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 210px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.4rem;
    margin-top: 2px;
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.custom-select-options.open { display: block; }
.custom-select-option {
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    font-size: 0.95rem;
}
.custom-select-option:hover,
.custom-select-option.active {
    background-color: var(--brand-light);
}

/* Events Showcase section */
.events-tabs .nav-link {
    color: var(--brand-muted);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    margin: 0 0.3rem;
    border: 1.5px solid #f0e4da;
}
.events-tabs .nav-link.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}
.event-card {
    border: 1px solid #f0e4da;
    border-radius: 1rem;
    padding: 1.6rem;
    background: #fff;
    height: 100%;
}
.event-card .event-date-badge {
    background: var(--brand-light);
    color: var(--brand-primary-dark);
    border-radius: 0.6rem;
    padding: 0.5rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}
.event-card.is-current .event-date-badge {
    background: #16a34a;
    color: #fff;
}
.event-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--brand-muted);
}

/* NFC teaser section */
.nfc-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--brand-light) 100%);
    padding: 4rem 0;
}
.nfc-mock-card {
    background: linear-gradient(135deg, #134e4a, #0f766e);
    color: #fff;
    border-radius: 1.2rem;
    padding: 1.8rem;
    box-shadow: 0 15px 35px rgba(15, 118, 110, 0.25);
}
.nfc-mock-card .nfc-chip {
    width: 42px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.25);
}
.nfc-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.nfc-benefit-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 0.7rem;
    background: var(--brand-light);
    color: var(--brand-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Pricing section */
.pricing-card {
    border: 1.5px solid #f0e4da;
    border-radius: 1.2rem;
    padding: 2rem 1.6rem;
    background: #fff;
    height: 100%;
    position: relative;
}
.pricing-card.is-popular {
    border-color: var(--brand-primary);
    box-shadow: 0 15px 35px rgba(232, 93, 4, 0.12);
}
.pricing-card .popular-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-card .price-amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-dark-text);
}
.pricing-card .price-period {
    color: var(--brand-muted);
    font-size: 0.95rem;
}
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0;
}
.pricing-card ul li {
    padding: 0.4rem 0;
    color: var(--brand-dark-text);
}
.pricing-card ul li i { color: #16a34a; margin-right: 0.5rem; }
.pricing-note {
    text-align: center;
    color: var(--brand-muted);
    font-size: 0.88rem;
}

/* Floating WhatsApp button - shown on public marketing pages */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: #25D366;
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 1050;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    color: #fff;
}

/* =====================================================
   LANDING PAGE REDESIGN — platform-level tokens
   ---------------------------------------------------
   Two product accents alongside the existing brand orange:
   - Exhibition keeps --brand-primary (orange) - unchanged
   - Digital Identity gets its own teal accent, matching the
     NFC app's own brand color, so the two "Explore" cards on
     the umbrella page visually match the products they link to
   Platform-level (both-together) sections use the dark navy
   already used for the Admin sidebar, tying public + admin
   into one visual identity instead of two unrelated palettes.
   ===================================================== */
:root {
    --di-primary: #0F766E;
    --di-primary-dark: #0B5D57;
    --di-light: #E6F5F3;
    --platform-dark: #1F2937;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

.font-display { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; }
body, .font-body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .btn-brand, .btn-brand-outline, .btn-brand-teal, .btn-brand-teal-outline {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* Teal button variants, mirroring the existing orange .btn-brand pair */
.btn-brand-teal {
    background-color: var(--di-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 0.6rem;
    padding: 0.7rem 1.5rem;
    display: inline-block;
    text-decoration: none;
}
.btn-brand-teal:hover { background-color: var(--di-primary-dark); color: #fff; }
.btn-brand-teal-outline {
    background-color: #fff;
    border: 1.5px solid var(--di-primary);
    color: var(--di-primary-dark);
    font-weight: 600;
    border-radius: 0.6rem;
    padding: 0.65rem 1.45rem;
    display: inline-block;
    text-decoration: none;
}
.btn-brand-teal-outline:hover { background-color: var(--di-light); color: var(--di-primary-dark); }

/* Platform (umbrella) hero — dark, sits above both product colors */
.platform-hero {
    background: linear-gradient(160deg, var(--platform-dark) 0%, #16202C 100%);
    color: #fff;
    padding: 5rem 0 4rem;
}
.platform-hero .eyebrow {
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.platform-hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.15;
}
.platform-hero .connect-capture-followup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 1.25rem 0 1.5rem;
}
.platform-hero .connect-capture-followup span { color: var(--di-primary); }
.platform-hero .connect-capture-followup span:nth-child(3) { color: var(--brand-primary); }
.platform-hero p.lead-text { color: rgba(255,255,255,0.8); font-size: 1.08rem; }
.platform-hero .trust-points {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    margin-top: 1.75rem; font-size: 0.88rem; color: rgba(255,255,255,0.75);
}
.platform-hero .trust-points i { color: #34D399; margin-right: 0.35rem; }

/* Two Core Solutions cards */
.solution-card {
    border-radius: 1.1rem;
    padding: 2.25rem;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.solution-card.is-di { background: var(--di-light); }
.solution-card.is-exh { background: var(--brand-light); }
.solution-card .solution-icon {
    width: 56px; height: 56px; border-radius: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff; margin-bottom: 1.25rem;
}
.solution-card.is-di .solution-icon { background: var(--di-primary); }
.solution-card.is-exh .solution-icon { background: var(--brand-primary); }
.solution-card ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.solution-card ul li { padding: 0.3rem 0; font-size: 0.95rem; }
.solution-card ul li i { margin-right: 0.5rem; }
.solution-card.is-di ul li i { color: var(--di-primary); }
.solution-card.is-exh ul li i { color: var(--brand-primary); }

/* Ecosystem flow diagram */
.ecosystem-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 1.5rem 0;
}
.ecosystem-node {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    width: 140px;
}
.ecosystem-node .node-circle {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; margin-bottom: 0.65rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.ecosystem-node .node-label { font-weight: 600; font-size: 0.85rem; }
.ecosystem-arrow { color: #CBD5E1; font-size: 1.4rem; margin: 0 0.35rem; }
@media (max-width: 767px) {
    .ecosystem-flow { flex-direction: column; }
    .ecosystem-arrow { transform: rotate(90deg); margin: 0.35rem 0; }
}

/* Before / After comparison */
.compare-col {
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
}
.compare-col.is-before { background: #FEF2F2; border: 1px solid #FCA5A5; }
.compare-col.is-after { background: var(--di-light); border: 1px solid #5EEAD4; }
.compare-step {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0; font-size: 0.95rem;
}
.compare-step:not(:last-child) { border-bottom: 1px dashed rgba(0,0,0,0.08); }
.compare-arrow-down { text-align: center; color: rgba(0,0,0,0.25); font-size: 1.1rem; }

/* NFC vs QR comparison */
.tap-scan-card {
    border-radius: 1rem; padding: 1.75rem; height: 100%;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Password show/hide toggle - auto-applied to every password field
   site-wide via a small shared script in each footer, not per-form
   markup, so this covers every login/reset/create-password field
   consistently without editing each one individually. */
.password-toggle-wrapper { position: relative; }
.password-toggle-wrapper input[type="password"],
.password-toggle-wrapper input[type="text"] { padding-right: 2.6rem; }
.password-toggle-btn {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9CA3AF; padding: 0.3rem 0.5rem;
    cursor: pointer; font-size: 1rem; line-height: 1;
}
.password-toggle-btn:hover { color: #1F2937; }

/* Theme swatch picker (Exhibitor profile edit) - same pattern as NFC's
   card theme picker, selected-state accent uses this app's own orange
   instead of NFC's teal. */
.theme-swatch-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.theme-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    cursor: pointer; padding: 0.5rem; border-radius: 0.7rem; border: 2px solid transparent;
}
.theme-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-swatch .swatch-color {
    width: 44px; height: 44px; border-radius: 50%; display: block;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}
.theme-swatch .swatch-label { font-size: 0.72rem; color: #374151; text-align: center; max-width: 70px; }
.theme-swatch.selected { border-color: var(--brand-primary); background: var(--brand-light); }
.theme-swatch.selected .swatch-color { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary); }

/* FAQ accordion tweaks - keep Bootstrap accordion but on-brand */
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--di-light);
    color: var(--platform-dark);
    box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: var(--di-primary); }

/* Who Can Use SAMpark */
.audience-pill {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.25rem; border-radius: 0.85rem;
    background: #F8FAFC; border: 1px solid rgba(0,0,0,0.05);
    height: 100%; font-weight: 600; font-size: 0.95rem;
}
.audience-pill i { font-size: 1.3rem; color: var(--platform-dark); }

/* Section eyebrow + heading pattern, reused across new sections */
.section-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    font-size: 0.78rem; color: var(--brand-muted);
}