/* =========================================================
   DekoGo Page — Standalone styles
   Scoped under .dekogo-page to avoid affecting header/footer
   ========================================================= */

.dekogo-page {
    --dg-blue: #2563EB;
    --dg-blue-2: #1D4ED8;
    --dg-blue-soft: #EFF6FF;
    --dg-dark: #0B1220;
    --dg-dark-2: #111827;
    --dg-text: #0F172A;
    --dg-muted: #6B7280;
    --dg-border: #E5E7EB;
    --dg-yellow: #F59E0B;
    --dg-red: #EF4444;
    --dg-green: #10B981;
    --dg-purple: #7C3AED;
    --dg-pink: #EC4899;
    --dg-radius: 14px;
    --dg-radius-lg: 18px;
    --dg-shadow: 0 6px 22px rgba(15, 23, 42, .08);
    color: var(--dg-text);
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.dekogo-page *,
.dekogo-page *::before,
.dekogo-page *::after {
    box-sizing: border-box;
}

.dekogo-page img {
    max-width: 100%;
    display: block;
}

.dekogo-page a {
    text-decoration: none;
    color: inherit;
}

.dekogo-container {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    /* Equal left/right gutters on every section, fluid across all devices */
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
}


/* ---------- HERO (LIGHT) ---------- */
.dg-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #FFFFFF;
    color: var(--dg-text);
}

.dg-hero .dekogo-container {
    position: relative;
    z-index: 2;
}

.dg-hero-bgimg {
    /* Full-bleed background image covering the whole hero section */
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

.dg-hero-bgimg img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.dg-hero-bgimg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .96) 22%, rgba(255, 255, 255, .6) 42%, rgba(255, 255, 255, 0) 62%);
    z-index: 2;
    pointer-events: none;
}

.dg-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    min-height: 460px;
}

.dg-hero-left {
    padding: 36px 40px 36px 0;
    position: relative;
    z-index: 2;
}

.dg-hero-left h1 {
    font-size: 80px;
    line-height: 1;
    font-weight: 800;
    margin: 0 0 18px;
    color: #0F172A;
    letter-spacing: -2.5px;
}

.dg-hero-tag {
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 14px;
    letter-spacing: -.3px;
}

.dg-hero-desc {
    font-size: 15px;
    color: #64748B;
    line-height: 1.65;
    max-width: 520px;
    margin: 0 0 28px;
}

.dg-hero-ctas {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.dg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    padding: 11px 22px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.dekogo-page a.dg-btn-primary,
.dekogo-page .dg-btn-primary {
    background: #1D4ED8 !important;
    color: #ffffff !important;
    border-color: #1D4ED8 !important;
}

.dekogo-page a.dg-btn-primary:hover,
.dekogo-page .dg-btn-primary:hover,
.dekogo-page a.dg-btn-primary:focus,
.dekogo-page .dg-btn-primary:focus {
    background: #1E40AF !important;
    border-color: #1E40AF !important;
    color: #ffffff !important;
    text-decoration: none;
}

.dekogo-page a.dg-btn-outline,
.dekogo-page .dg-btn-outline {
    background: #ffffff !important;
    color: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

.dekogo-page a.dg-btn-outline:hover,
.dekogo-page .dg-btn-outline:hover,
.dekogo-page a.dg-btn-outline:focus,
.dekogo-page .dg-btn-outline:focus {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    text-decoration: none;
}

.dg-btn-dark {
    background: var(--dg-dark);
    color: #fff;
}

.dg-btn-dark:hover {
    background: #000;
    color: #fff;
}

.dg-btn-lg {
    padding: 14px 26px;
    font-size: 15px;
}

/* Feature row (Near You, Book Instantly...) */
.dg-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 10px;
}

.dg-feature {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dg-feature-ic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dg-blue);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}

.dg-feature h5 {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dg-text);
    letter-spacing: -.1px;
}

.dg-feature p {
    margin: 0;
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.45;
}

/* Hero right (image bleeds to the right edge of the dark bg) */
.dg-hero-right {
    position: relative;
    overflow: hidden;
    min-height: 460px;
}

.dg-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.dg-hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0B1220 0%, rgba(11, 18, 32, .55) 18%, rgba(11, 18, 32, 0) 48%);
    z-index: 1;
    pointer-events: none;
}

.dg-hero-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, .15) 0%, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, .45) 100%);
    z-index: 1;
    pointer-events: none;
}

.dg-pass-card {
    position: absolute;
    bottom: 26px;
    /* Align the card's right edge with the image/content edge (same gutter),
       so it no longer pokes out past the hero image into the side padding. */
    right: clamp(16px, 4vw, 40px);
    background: linear-gradient(180deg, #0F172A 0%, #1E1B4B 100%);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 18px 20px;
    border-radius: 16px;
    width: 280px;
    max-width: calc(100% - 32px);
    border: 1px solid rgba(139, 92, 246, .5);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .25),
        0 20px 40px -10px rgba(124, 58, 237, .45);
    z-index: 3;
}

@media (max-width: 900px) {
    .dg-pass-card {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 20px auto 0;
        width: min(320px, 100%);
    }
}

.dg-pass-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.dg-pass-card-ic {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.dg-pass-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.dg-pass-card p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.4;
}

.dg-pass-link {
    display: block;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    background: var(--dg-blue);
    border-radius: 8px;
    border: 1px solid var(--dg-blue);
}

.dg-pass-link:hover {
    background: var(--dg-blue-2);
    color: #fff;
}

/* ---------- SEARCH BAR ---------- */
.dg-search-section {
    background: #fff;
    padding: 18px 0 4px;
}

.dg-searchbar-wrap {
    margin: 0 0 14px;
}

.dg-searchbar {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 6px 6px 6px 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.dg-search-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 18px;
    height: 48px;
    border-right: 1px solid #E5E7EB;
    flex: 0 0 auto;
    min-width: 200px;
}

.dg-search-loc>i {
    color: #2563EB;
    font-size: 15px;
}

.dg-search-geo {
    flex: none;
    border: 1px solid #DBEAFE;
    background: #EFF6FF;
    color: #2563EB;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .15s, color .15s, transform .15s;
}

.dg-search-geo:hover {
    background: #2563EB;
    color: #fff;
}

.dg-search-geo:disabled {
    opacity: .6;
    cursor: wait;
}

.dg-search-geo.is-loading i {
    animation: dgSpin 1s linear infinite;
}

@keyframes dgSpin {
    to {
        transform: rotate(360deg);
    }
}

.dg-search-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-search-hint i {
    color: #2563EB;
}

.dg-search-hint strong {
    color: #0F172A;
}

.dg-search-loc select {
    border: 0;
    background: transparent;
    font-weight: 600;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 22px;
    font-size: 14px;
    color: #0F172A;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}

.dg-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 48px;
    flex: 1 1 auto;
    min-width: 0;
}

.dg-search-input>i {
    color: #94A3B8;
    font-size: 15px;
}

.dg-search-input input {
    border: 0;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #0F172A;
    background: transparent;
}

.dg-search-input input::placeholder {
    color: #94A3B8;
}

.dg-search-btn {
    background: #1D4ED8;
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
    flex: 0 0 44px;
    margin-right: 0;
}

.dg-search-btn:hover {
    background: #1E40AF;
}

/* Filter chips */
.dg-chips-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 28px;
}

.dg-chips {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 24px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}

.dg-chips::-webkit-scrollbar {
    display: none;
}

.dg-chip-filters {
    flex: none;
    border-color: #CBD5E1 !important;
    background: #F8FAFC !important;
}

.dg-chip-filters:hover {
    background: #0B1220 !important;
    color: #fff !important;
    border-color: #0B1220 !important;
}

.dg-chip-filters:hover i {
    color: #fff;
}

@media (max-width: 640px) {
    .dg-chips-row {
        gap: 8px;
        padding-bottom: 18px;
    }

    .dg-chips {
        padding-right: 16px;
    }
}

.dg-chip {
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    background: #fff;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    white-space: nowrap;
}

.dg-chip:hover {
    border-color: #1D4ED8;
    color: #1D4ED8;
}

.dg-chip.is-active {
    background: #0B1220;
    color: #fff !important;
    border-color: #0B1220;
}

.dg-chip.is-active:hover {
    background: #000;
    color: #fff !important;
    border-color: #000;
}

.dg-chip i {
    font-size: 12px;
    color: #64748B;
}

/* ---------- HOT TICKETS DARK PANEL ---------- */
.dg-hot {
    background:
        radial-gradient(60% 80% at 85% 50%, rgba(124, 58, 237, .18), transparent 70%),
        radial-gradient(50% 60% at 15% 100%, rgba(37, 99, 235, .18), transparent 70%),
        linear-gradient(180deg, #0F0B2E 0%, #0B0D24 40%, #0B1220 100%);
    color: #fff;
    border-radius: 18px;
    padding: 26px 26px 28px;
    margin: 8px 0 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, .25);
    box-shadow: 0 24px 60px -20px rgba(124, 58, 237, .35);
}

.dg-hot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(124, 58, 237, .18), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .18), transparent 40%);
    pointer-events: none;
}

.dg-hot-grid {
    position: relative;
    display: grid;
    grid-template-columns: 340px 1fr 290px;
    gap: 20px;
    align-items: stretch;
}

.dg-hot-headline {
    color: #fff;
}

.dg-hot-flame {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: #fff;
}

.dg-hot-flame .dg-hot-bold {
    color: #FBBF24;
}

.dg-hot-headline h2 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.5px;
}

.dg-hot-headline p {
    color: #94A3B8;
    font-size: 13px;
    margin: 0 0 20px;
    line-height: 1.55;
}

.dg-hot-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.dg-stat {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.dg-stat strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.dg-stat span {
    font-size: 10px;
    color: #94A3B8;
}

.dg-hot-avatars {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #94A3B8;
}

.dg-hot-avatars .avs {
    display: inline-flex;
}

.dg-hot-avatars .avs span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #6366F1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #6366F1, #EC4899);
    background-repeat: no-repeat;
    background-position: center bottom -2px, center;
    background-size: 16px 16px, cover;
    border: 2px solid #0B1220;
    margin-left: -6px;
    display: inline-block;
}

.dg-hot-avatars .avs span:first-child {
    margin-left: 0;
}

.dg-hot-cta-row {
    display: flex;
}

.dg-hot-cta-row .dg-btn {
    width: 100%;
}

/* Timer + cards center */
.dg-hot-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dg-hot-timer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 21px;
    margin-bottom: 14px;
}

.dg-hot-end-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1D4ED8;
    border: 0;
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .6);
}

.dg-hot-timer {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
    color: #fff;
}

.dg-hot-timer>span:not(.lbl) {
    font-size: 26px;
    color: #fff;
    line-height: 1;
    letter-spacing: -.5px;
}

.dg-hot-timer .lbl {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 700;
    margin: 0 6px 0 2px;
    letter-spacing: .3px;
}

.dg-hot-limited {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: 0 4px 12px -4px rgba(239, 68, 68, .6);
}

.dg-hot-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.dg-mini {
    background: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    color: #0F172A;
    border: 1px solid rgba(139, 92, 246, .35);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .15),
        0 12px 30px -10px rgba(124, 58, 237, .45);
    height: 100%;
}

.dg-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .35),
        0 18px 40px -12px rgba(124, 58, 237, .6);
}

.dg-mini.is-selected {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px #8B5CF6,
        0 18px 40px -12px rgba(124, 58, 237, .6);
}

.dg-mini-media {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #1F2937;
    flex: 0 0 auto;
}

.dg-mini-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-mini-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: #EC4899;
    letter-spacing: .2px;
}

.dg-mini-badge.is-green {
    background: #10B981;
}

.dg-mini-badge.is-orange {
    background: #F59E0B;
}

.dg-mini-badge.is-purple {
    background: #8B5CF6;
}

.dg-mini-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F172A;
    font-size: 12px;
    cursor: pointer;
}

.dg-mini-body {
    padding: 14px 14px 14px;
    background: #fff;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 150px;
}

.dg-mini-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 10px;
    line-height: 1.3;
    min-height: 38px;
}

.dg-mini-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.dg-mini-meta span {
    font-size: 11.5px;
    color: #64748B;
    display: flex;
    gap: 6px;
    align-items: center;
}

.dg-mini-meta i {
    color: #94A3B8;
    font-size: 11px;
    width: 12px;
}

.dg-mini-price {
    font-size: 16px;
    font-weight: 800;
    color: #EF4444;
    margin-top: auto;
    margin-bottom: 0;
}

.dg-mini-price.is-free {
    color: #10B981;
}

.dg-mini-booked-bar {
    background: #F1F5F9;
    padding: 8px 14px;
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    border-top: 1px solid #E5E7EB;
    flex: 0 0 auto;
}

.dg-mini-booked-bar i {
    color: #F59E0B;
    font-size: 11px;
}

/* Quick purchase panel */
.dg-quick {
    background: linear-gradient(180deg, rgba(30, 27, 75, .55), rgba(15, 23, 42, .85));
    border: 1px solid rgba(139, 92, 246, .45);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .15),
        0 20px 50px -15px rgba(124, 58, 237, .45);
    border-radius: 14px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.dg-quick h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}

.dg-quick-event {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dg-quick-event-img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    background: #1F2937;
    flex: 0 0 54px;
}

.dg-quick-event-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-quick-event h5 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #fff;
}

.dg-quick-event p {
    margin: 0;
    font-size: 10.5px;
    color: #94A3B8;
    line-height: 1.45;
}

.dg-quick-event p i {
    color: var(--dg-blue);
    margin-right: 4px;
}

.dg-quick-sec-title {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.dg-quick-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dg-quick-ticket-name {
    font-size: 12px;
    color: #fff;
}

.dg-quick-ticket-name span {
    display: block;
    font-size: 11px;
    color: var(--dg-yellow);
    margin-top: 2px;
}

.dg-qty {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    overflow: hidden;
}

.dg-qty button {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.dg-qty button:disabled {
    color: #64748B;
    cursor: not-allowed;
    opacity: .5;
}

.dg-qty input {
    width: 32px;
    height: 28px;
    text-align: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.dg-quick-total {
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
    font-size: 11px;
    color: #94A3B8;
}

.dg-quick-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed rgba(255, 255, 255, .15);
    margin-bottom: 10px;
}

.dg-quick-grand strong {
    font-size: 18px;
    color: #38BDF8;
}

.dg-quick-buy {
    background: linear-gradient(90deg, #2563EB, #0EA5E9);
    color: #fff;
}

.dg-quick-buy:hover {
    filter: brightness(1.05);
    color: #fff;
}

.dg-quick-buy.is-disabled {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.dg-quick-foot {
    margin-top: 10px;
    font-size: 10.5px;
    color: #94A3B8;
    text-align: center;
    line-height: 1.6;
}

.dg-quick-foot i.fa-shield,
.dg-quick-foot i.fa-check-circle {
    color: var(--dg-green);
    margin-right: 4px;
}

/* ---------- HAPPENING NEAR YOU ---------- */
.dg-section {
    padding: 36px 0;
}

.dg-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.dg-section-head h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: var(--dg-text);
}

.dg-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--dg-blue);
}

.dg-link:hover {
    color: var(--dg-blue-2);
}

.dg-tab-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dg-tab-chip {
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--dg-blue-soft);
    color: var(--dg-blue);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.dg-tab-chip:not(.is-active) {
    background: #fff;
    color: var(--dg-text);
    border-color: var(--dg-border);
}

.dg-tab-chip:hover {
    color: var(--dg-blue);
    border-color: var(--dg-blue);
}

.dg-near-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: start;
}

.dg-near-left {
    min-width: 0;
}

.dg-near-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.dg-event-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
}

.dg-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .15);
    border-color: #CBD5E1;
}

.dg-event-media {
    position: relative;
    height: 150px;
    overflow: hidden;
    flex: 0 0 auto;
}

.dg-event-card .dg-event-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.dg-event-card .dg-event-foot {
    margin-top: auto;
}

.dg-event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-event-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: var(--dg-blue);
}

.dg-event-badge.bg-purple {
    background: var(--dg-purple);
}

.dg-event-badge.bg-green {
    background: var(--dg-green);
}

.dg-event-badge.bg-pink {
    background: var(--dg-pink);
}

.dg-event-badge.bg-orange {
    background: var(--dg-yellow);
}

.dg-event-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--dg-text);
    cursor: pointer;
}

.dg-event-body {
    padding: 12px 12px 14px;
}

.dg-event-body h4 {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dg-text);
    line-height: 1.3;
}

.dg-event-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.dg-event-meta span {
    font-size: 11.5px;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-event-meta i {
    color: #94A3B8;
    font-size: 10.5px;
    width: 12px;
}

.dg-event-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dg-event-rate {
    font-size: 11px;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.dg-event-rate i {
    color: #F59E0B;
}

.dg-event-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--dg-red);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.dg-event-price.is-free {
    color: var(--dg-green);
}

.dg-event-old {
    font-size: 11.5px;
    font-weight: 500;
    color: #94A3B8;
    text-decoration: line-through;
}

.dg-event-rate {
    font-size: 11px;
    color: var(--dg-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dg-event-rate i {
    color: var(--dg-yellow);
}

/* Sidebar (Host an Event etc.) */
.dg-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dg-side-card {
    border-radius: 14px;
    padding: 18px 0 18px 18px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    min-height: 140px;
}

.dg-side-card.is-rose {
    background: linear-gradient(120deg, #FCE7F3 0%, #FBCFE8 100%);
}

.dg-side-card.is-violet {
    background: linear-gradient(120deg, #EDE9FE 0%, #DDD6FE 100%);
}

.dg-side-card.is-pink {
    background: linear-gradient(120deg, #DBEAFE 0%, #E0E7FF 100%);
}

.dg-side-card-body {
    flex: 1;
    padding-right: 12px;
}

.dg-side-card-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dg-text);
    letter-spacing: -.2px;
}

.dg-side-card-body p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #475569;
    line-height: 1.45;
}

.dg-side-card-img {
    width: 130px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .5);
    flex: 0 0 130px;
    align-self: stretch;
    margin-right: 0;
}

.dg-side-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-side-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EC4899;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    transition: filter .2s;
    border: 0;
}

.dg-side-btn:hover {
    filter: brightness(1.05);
    color: #fff;
}

.dg-side-btn.is-purple {
    background: var(--dg-purple);
}

.dg-side-btn.is-dark {
    background: var(--dg-dark);
}

/* Deals + Browse-by-category grid */
.dg-deals-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

.dg-deals-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dg-cat-box {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: 14px;
    padding: 14px;
}

.dg-cat-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dg-cat-box-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--dg-text);
}

.dg-cat-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dg-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    text-decoration: none;
    text-align: center;
    min-height: 70px;
    min-width: 0;
    transition: border-color .15s, background .15s, transform .15s;
}

.dg-cat-tile:hover {
    background: #EFF6FF;
    border-color: var(--dg-blue);
    transform: translateY(-1px);
}

.dg-cat-tile i {
    font-size: 18px;
    color: var(--dg-blue);
    margin: 0;
    flex: none;
}

.dg-cat-tile-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin: 0;
    flex: none;
}

.dg-cat-tile span {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dg-text);
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

.dg-cat-tile span small {
    display: none;
}

/* ---------- CULTURE BANNER ---------- */
.dg-culture {
    background: linear-gradient(90deg, #1E1B4B 0%, #0B1024 50%, #0B1220 100%);
    color: #fff;
    border-radius: 22px 0 22px 22px;
    padding: 28px 28px 28px 0;
    display: grid;
    grid-template-columns: 200px 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin: 12px 0 50px;
    min-height: 170px;
}

/* Top-right concave notch */
.dg-culture::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 563px;
    height: 38px;
    background: #ffffff;
    border-bottom-left-radius: 28px;
    z-index: 5;
}


/* Concert image bleeding on the left with diagonal fade */
.dg-culture-img {
    position: relative;
    align-self: stretch;
    overflow: hidden;
}

.dg-culture-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-culture-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .35) 55%, #0B1024 100%);
}

.dg-culture-text {
    padding-left: 8px;
}

.dg-culture-text h2 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -.4px;
}

.dg-culture-text h2 span {
    color: #38BDF8;
}

.dg-culture-text p {
    margin: 0 0 16px;
    color: #CBD5E1;
    font-size: 13px;
    max-width: 480px;
}

/* Center glowing purple ticket icon */
.dg-culture-ticket {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid #A78BFA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #C4B5FD;
    position: relative;
    flex: 0 0 96px;
    box-shadow: 0 0 0 6px rgba(167, 139, 250, .12),
        0 0 22px rgba(167, 139, 250, .65),
        inset 0 0 22px rgba(167, 139, 250, .35);
    background: radial-gradient(circle at center, rgba(124, 58, 237, .25), rgba(11, 18, 32, 0) 70%);
}

.dg-culture-ticket::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, .25);
    pointer-events: none;
}

.dg-culture-ticket::after {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, .18), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.dg-culture-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dg-cp {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dg-cp-ic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563EB;
    font-size: 16px;
    flex: 0 0 42px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .04),
        0 4px 12px rgba(0, 0, 0, .25);
}

.dg-cp h5 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.dg-cp p {
    margin: 0;
    font-size: 11.5px;
    color: #94A3B8;
    line-height: 1.45;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .dg-hero-left h1 {
        font-size: 52px;
    }

    .dg-hot-grid {
        grid-template-columns: 1fr;
    }

    .dg-near-grid,
    .dg-deals-grid {
        grid-template-columns: 1fr;
    }

    .dg-near-rail {
        grid-template-columns: repeat(3, 1fr);
    }

    .dg-deals-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 980px) {

    /* Keep the image full-bleed; just strengthen the left scrim so text stays readable */
    .dg-hero-bgimg::before {
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 72%);
    }
}

@media (max-width: 820px) {
    .dg-hero-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Once stacked, drop the desktop-only right gutter so text sits in equal margins */
    .dg-hero-left {
        padding: 28px 0 14px;
    }

    .dg-hero-bgimg {
        width: 100%;
        right: 0;
        opacity: .25;
    }

    .dg-hero-bgimg::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .85));
    }

    .dg-pass-card {
        display: none;
    }

    .dg-hero-right {
        min-height: 340px;
    }

    .dg-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-searchbar {
        flex-wrap: wrap;
        padding: 6px;
        gap: 6px;
    }

    .dg-search-loc {
        border-right: 0;
        border-bottom: 1px solid var(--dg-border);
        flex: 1 1 100%;
        min-width: 0;
    }

    .dg-search-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dg-hot-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-near-rail {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-deals-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-culture {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 18px;
    }

    .dg-culture-img {
        display: none;
    }

    .dg-culture-ticket {
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .dg-hero-left h1 {
        font-size: 38px;
    }

    .dg-hero-tag {
        font-size: 18px;
    }

    .dg-features {
        grid-template-columns: 1fr;
    }

    .dg-hot-cards {
        grid-template-columns: 1fr;
    }

    .dg-near-rail,
    .dg-deals-row {
        grid-template-columns: 1fr;
    }

    /* .dg-cat-list is already a vertical flex list — no override needed at this breakpoint. */

    .dg-culture-points {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ALL EVENT TICKETS PAGE (Your Week Starts Here)
   ========================================================= */

.dg-all-events {
    background: #F8FAFC;
    padding: 28px 0 50px;
}

/* ---- HERO ROW ---- */
.dg-ae-hero {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 22px;
    margin-bottom: 22px;
    align-items: center;
}

.dg-ae-hero-left h1 {
    font-size: 44px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 8px;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dg-ae-hero-left h1 .dg-sparkle {
    color: #8B5CF6;
    font-size: 24px;
}

.dg-ae-hero-left>p {
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748B;
}

.dg-ae-mini-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.dg-ae-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
}

.dg-ae-mini i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* "Book before spots fill up" promo card */
.dg-ae-promo {
    background: linear-gradient(135deg, #0F0B2E, #1E1B4B);
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.dg-ae-promo-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, .35), rgba(167, 139, 250, 0));
    border: 1.5px solid rgba(167, 139, 250, .55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #C4B5FD;
    font-size: 20px;
    flex: 0 0 46px;
    box-shadow: 0 0 18px rgba(167, 139, 250, .35);
}

.dg-ae-promo-text {
    flex: 1;
    min-width: 0;
}

.dg-ae-promo-text h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #F472B6;
}

.dg-ae-promo-text p {
    margin: 0;
    font-size: 12px;
    color: #CBD5E1;
}

.dg-ae-promo-btn {
    background: #fff !important;
    color: #1D4ED8 !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
    border: 0;
}

/* ---- DATE FILTER BAR ---- */
.dg-ae-datebar {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
}

.dg-ae-tab {
    padding: 8px 16px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    color: #0F172A;
    transition: background .2s;
    white-space: nowrap;
}

.dg-ae-tab:hover {
    background: #F1F5F9;
}

.dg-ae-tab strong {
    font-size: 13px;
    font-weight: 700;
}

.dg-ae-tab span {
    font-size: 11px;
    color: #64748B;
    margin-top: 3px;
    font-weight: 500;
}

.dg-ae-tab.is-active {
    background: #1D4ED8;
    color: #fff;
}

.dg-ae-tab.is-active strong {
    color: #fff;
}

.dg-ae-tab.is-active span {
    color: rgba(255, 255, 255, .85);
}

.dg-ae-datebar-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    flex: 0 0 32px;
}

.dg-ae-dayslist {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.dg-ae-dayslist::-webkit-scrollbar {
    display: none;
}

.dg-ae-day {
    flex: 0 0 auto;
}

.dg-ae-day {
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    text-align: center;
    cursor: pointer;
    line-height: 1.1;
    display: inline-flex;
    flex-direction: column;
    color: #0F172A;
    min-width: 50px;
    transition: background .2s;
}

.dg-ae-day:hover {
    background: #F1F5F9;
}

.dg-ae-day span {
    font-size: 10px;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 3px;
}

.dg-ae-day strong {
    font-size: 16px;
    font-weight: 700;
}

.dg-ae-day em {
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .4px;
    color: #94A3B8;
    margin-top: 2px;
}

.dg-ae-day.is-active {
    background: #1D4ED8;
    color: #fff;
}

.dg-ae-day.is-active span,
.dg-ae-day.is-active em {
    color: rgba(255, 255, 255, .85);
}

.dg-ae-cal-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #E5E7EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    flex: 0 0 38px;
}

.dg-ae-cal-btn:hover {
    border-color: #1D4ED8;
    color: #1D4ED8;
}

/* Wrapper anchors the native picker to the calendar button (instead of the page corner) */
.dg-ae-cal {
    position: relative;
    display: inline-flex;
    flex: 0 0 38px;
}

.dg-ae-cal-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

/* Hide the native input's own text/icon — only the picker popup should appear */
.dg-ae-cal-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

/* ---- FILTERS ROW ---- */
.dg-ae-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.dg-ae-filter-pill {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.dg-ae-filter-pill i {
    color: #475569;
    font-size: 12px;
}

.dg-ae-filter-pill:hover {
    border-color: #1D4ED8;
    color: #1D4ED8;
}

.dg-ae-view-toggle {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 4px;
}

.dg-ae-view-btn {
    padding: 7px 14px;
    border-radius: 7px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dg-ae-view-btn.is-active {
    background: #1D4ED8;
    color: #fff !important;
}

/* ---- DYNAMIC FILTER DROPDOWNS ---- */
.dg-ae-filter {
    position: relative;
    display: inline-flex;
}

.dg-ae-filter .dg-ae-caret {
    transition: transform .18s ease;
}

.dg-ae-filter.open .dg-ae-caret {
    transform: rotate(180deg);
}

.dg-ae-filter.open .dg-ae-filter-pill {
    border-color: #1D4ED8;
    color: #1D4ED8;
}

.dg-ae-filter.has-value .dg-ae-filter-pill {
    background: #EFF6FF;
    border-color: #1D4ED8;
    color: #1D4ED8;
}

.dg-ae-filter.has-value .dg-ae-filter-pill i {
    color: #1D4ED8;
}

.dg-ae-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 100%;
    width: max-content;
    max-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    padding: 6px;
    display: none;
}

.dg-ae-filter.open .dg-ae-filter-menu {
    display: block;
    animation: dgFilterIn .15s ease;
}

@keyframes dgFilterIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dg-ae-filter-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    cursor: pointer;
    white-space: nowrap;
}

.dg-ae-filter-opt:hover {
    background: #F1F5F9;
}

.dg-ae-filter-opt.is-active {
    background: #1D4ED8;
    color: #fff;
}

.dg-ae-filter-clear {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #DC2626;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dg-ae-filter-clear:hover {
    background: #FEE2E2;
}

.dg-ae-empty {
    text-align: center;
    color: #64748B;
    font-size: 14px;
    font-weight: 600;
    padding: 28px 0;
    margin: 0;
}

.dg-ae-empty i {
    color: #94A3B8;
    margin-right: 6px;
}

.dg-ae-noresults {
    text-align: center;
    padding: 64px 20px;
    color: #475569;
}

.dg-ae-noresults i {
    font-size: 42px;
    color: #CBD5E1;
    margin-bottom: 14px;
    display: block;
}

.dg-ae-noresults h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px;
}

.dg-ae-noresults p {
    font-size: 14px;
    margin: 0;
}

/* ---- AJAX RESULTS GRID + LOADING ---- */
.dg-ae-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

#dgEventsArea {
    transition: opacity .15s ease;
}

#dgEventsArea.dg-loading {
    opacity: .45;
    pointer-events: none;
}

/* ---- EVENT SECTION (Tonight / Weekend / Next Week) ---- */
.dg-ae-section {
    margin-bottom: 30px;
    position: relative;
}

.dg-ae-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dg-ae-section-head-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dg-ae-section-head h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.3px;
}

.dg-ae-section-head h2 i {
    color: #F59E0B;
    font-size: 20px;
}

.dg-ae-section-head h2 .dg-ae-sec-sparkle {
    color: #8B5CF6;
    font-size: 18px;
}

.dg-ae-section-head-left .dg-ae-range {
    font-size: 13px;
    font-weight: 600;
    color: #1D4ED8;
}

.dg-ae-view-link {
    font-size: 13px;
    font-weight: 700;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-ae-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    position: relative;
}

.dg-ae-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.dg-ae-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .18);
}

.dg-ae-card-media {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.dg-ae-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-ae-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #EF4444;
}

.dg-ae-card-badge.is-purple {
    background: #8B5CF6;
}

.dg-ae-card-badge.is-orange {
    background: #F59E0B;
}

.dg-ae-card-badge.is-teal {
    background: #14B8A6;
}

.dg-ae-card-badge.is-pink {
    background: #EC4899;
}

.dg-ae-card-badge.is-blue {
    background: #2563EB;
}

.dg-ae-card-badge.is-red {
    background: #EF4444;
}

.dg-ae-card-badge.is-green {
    background: #10B981;
}

.dg-ae-card-badge.is-violet {
    background: #6D28D9;
}

.dg-ae-card-recurs {
    position: absolute;
    top: 46px;
    /* sits just under the favourite heart (top:10, 30px tall) */
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, .72);
}

.dg-ae-card-recurs i {
    font-size: 10px;
}

.dg-ae-card-time {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, .8);
    backdrop-filter: blur(4px);
}

.dg-ae-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F172A;
    font-size: 13px;
    cursor: pointer;
    border: 0;
}

.dg-ae-card-fav:hover {
    color: #EF4444;
}

.dg-ae-card-body {
    padding: 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.dg-ae-card-body h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    min-height: 38px;
}

.dg-ae-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.dg-ae-card-meta span {
    font-size: 12px;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-ae-card-meta i {
    color: #94A3B8;
    font-size: 11px;
    width: 12px;
}

.dg-ae-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dg-ae-card-price {
    font-size: 14px;
    font-weight: 800;
    color: #EF4444;
}

.dg-ae-card-price.is-free {
    color: #10B981;
}

.dg-ae-card-rate {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dg-ae-card-rate i {
    color: #F59E0B;
}

/* Card right-arrow (carousel-style hint) */
.dg-ae-arrow {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E5E7EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
    z-index: 4;
}

.dg-ae-arrow:hover {
    color: #1D4ED8;
}

/* Date pill overlay (used in Next Week section) */
.dg-ae-date-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .95);
    border-radius: 8px;
    padding: 5px 8px;
    text-align: center;
    min-width: 44px;
    line-height: 1.1;
    backdrop-filter: blur(4px);
}

.dg-ae-date-overlay strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #0F172A;
}

.dg-ae-date-overlay span {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748B;
}

/* ---- BOTTOM CTA BAR ---- */
.dg-ae-cta {
    background: linear-gradient(135deg, #1E1B4B, #0B1024);
    border-radius: 14px;
    padding: 22px 28px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 28px;
    align-items: center;
    margin-top: 10px;
}

.dg-ae-cta-text h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.dg-ae-cta-text p {
    margin: 0;
    font-size: 12px;
    color: #94A3B8;
}

.dg-ae-cta-btn {
    background: #1D4ED8 !important;
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
}

.dg-ae-cta-feat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dg-ae-cta-feat-ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dg-ae-cta-feat-text h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.dg-ae-cta-feat-text p {
    margin: 0;
    font-size: 11px;
    color: #94A3B8;
}

@media (max-width: 1100px) {
    .dg-ae-hero {
        grid-template-columns: 1fr;
    }

    .dg-ae-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dg-ae-cta {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 720px) {
    .dg-ae-rail {
        grid-template-columns: 1fr;
    }

    .dg-ae-hero-left h1 {
        font-size: 32px;
    }
}

/* ---- LIGHT FEATURE BAR (below dark CTA) ---- */
.dg-ae-feat-bar {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 14px;
}

.dg-ae-feat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dg-ae-feat-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 44px;
}

.dg-ae-feat h5 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: #1D4ED8;
    letter-spacing: -.1px;
}

.dg-ae-feat p {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
}

@media (max-width: 1100px) {
    .dg-ae-feat-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dg-ae-feat-bar {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   EVENT DETAIL PAGE
   ========================================================= */
.dg-evd {
    background: #F8FAFC;
    padding: 18px 0 50px;
}

/* Breadcrumb */
.dg-evd-crumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: #64748B;
    margin-bottom: 16px;
}

.dg-evd-crumb a {
    color: #64748B;
}

.dg-evd-crumb a:hover {
    color: #1D4ED8;
}

.dg-evd-crumb i {
    font-size: 9px;
    color: #94A3B8;
}

.dg-evd-crumb .is-current {
    color: #0F172A;
    font-weight: 600;
}

/* Layout */
.dg-evd-grid {
    display: grid;
    grid-template-columns: 1fr 451px;
    gap: 22px;
    align-items: start;
}

/* Grid items default to min-width:auto, so a wide descendant (non-wrapping
   flex row, thumbs strip, slider) stops the 1fr track from shrinking and
   overflows the whole page. min-width:0 lets the tracks shrink to fit. */
.dg-evd-grid>* {
    min-width: 0;
}

/* ---- HERO MEDIA ---- */
.dg-evd-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #1F2937;
    margin-bottom: 14px;
}

.dg-evd-hero-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.dg-evd-hero-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 8px;
}

.dg-evd-tag {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.dg-evd-tag.is-red {
    background: #EF4444;
}

.dg-evd-tag.is-orange {
    background: #F59E0B;
}

.dg-evd-tag.is-purple {
    background: #8B5CF6;
}

.dg-evd-tag.is-blue {
    background: #2563EB;
}

.dg-evd-date-card {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
    min-width: 76px;
    line-height: 1.15;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

.dg-evd-date-card .lbl {
    font-size: 11px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: .3px;
}

.dg-evd-date-card .mo {
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
}

.dg-evd-date-card .d {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 1px 0;
}

.dg-evd-date-card .y {
    font-size: 10px;
    color: #64748B;
    font-weight: 600;
}

.dg-evd-thumbs {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 6;
    /* stay above the video stage (z-index:5) while it plays */
}

.dg-evd-thumb {
    width: 70px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    background: rgba(15, 23, 42, .6);
}

.dg-evd-thumb.is-active {
    border-color: #fff;
}

.dg-evd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-evd-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: rgba(15, 23, 42, .55);
}

/* ---- TITLE + META ---- */
.dg-evd-title {
    font-size: 28px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px;
    letter-spacing: -.4px;
}

.dg-evd-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.dg-evd-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 12px;
    color: #475569;
    background: #fff;
}

.dg-evd-tag-pill i {
    font-size: 11px;
    color: #64748B;
}

.dg-evd-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 720px;
}

.dg-evd-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.dg-evd-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dg-evd-info-ic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
}

.dg-evd-info-text h5 {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-info-text p {
    margin: 0 0 4px;
    font-size: 12px;
    color: #64748B;
}

.dg-evd-cohost-role {
    color: #94A3B8;
    font-weight: 500;
}

.dg-evd-info-text a {
    color: #1D4ED8;
    font-size: 12px;
    font-weight: 600;
}

.dg-evd-info-text a:hover {
    color: #1E40AF;
}

/* ---- HIGH DEMAND BANNER ---- */
.dg-evd-urg {
    background: linear-gradient(90deg, #FEE4E2 0%, #FFE4E6 50%, #FCE7F3 100%);
    border: 1px solid #FECACA;
    border-radius: 14px;
    padding: 16px 22px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
}

.dg-evd-urg-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FEE2E2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #EF4444;
    font-size: 22px;
}

.dg-evd-urg-text h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
}

.dg-evd-urg-text p {
    margin: 0;
    font-size: 12px;
    color: #64748B;
}

.dg-evd-urg-timer {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
}

.dg-evd-urg-timer .num {
    font-size: 24px;
    color: #0F172A;
}

.dg-evd-urg-timer .lbl {
    font-size: 10px;
    color: #64748B;
    margin: 0 4px 0 2px;
    font-weight: 700;
}

.dg-evd-urg-right {
    font-size: 12px;
    color: #475569;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dg-evd-urg-avs {
    display: inline-flex;
}

.dg-evd-urg-avs span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F87171, #FBBF24);
    border: 2px solid #fff;
    margin-left: -6px;
    display: inline-block;
}

.dg-evd-urg-avs span:first-child {
    margin-left: 0;
}

/* ---- SELECT TICKETS ---- */
.dg-evd-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px;
    letter-spacing: -.2px;
}

.dg-evd-section-sub {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 16px;
}

.dg-evd-tickets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.dg-evd-ticket {
    background: #fff;
    border: 2px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px;
    position: relative;
    transition: border-color .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.dg-evd-ticket.is-active {
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .1);
}

.dg-evd-ticket-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dg-evd-ticket-head i {
    width: 22px;
    font-size: 18px;
}

.dg-evd-ticket.is-admission i {
    color: #2563EB;
}

.dg-evd-ticket.is-vip i {
    color: #F59E0B;
}

.dg-evd-ticket.is-couples i {
    color: #EC4899;
}

.dg-evd-ticket.is-group i {
    color: #8B5CF6;
}

.dg-evd-ticket-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-ticket-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    flex: 1 1 auto;
}

.dg-evd-ticket-feats li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #475569;
    padding: 2px 0;
}

.dg-evd-ticket-feats li::before {
    content: '✓';
    color: #10B981;
    font-weight: 700;
    flex-shrink: 0;
}

.dg-evd-ticket-mini-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
    background: #FCE7F3;
    color: #EC4899;
    align-self: flex-start;
}

.dg-evd-ticket-mini-badge.is-best {
    background: #EDE9FE;
    color: #7C3AED;
}

.dg-evd-ticket-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dg-evd-ticket-price {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
}

.dg-evd-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
}

.dg-evd-qty button {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 0;
    color: #0F172A;
    font-size: 14px;
    cursor: pointer;
}

.dg-evd-qty button:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
    opacity: .55;
}

.dg-evd-qty input {
    width: 34px;
    height: 28px;
    border: 0;
    text-align: center;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-vip-row {
    text-align: center;
    margin-bottom: 26px;
    font-size: 13px;
    color: #475569;
}

.dg-evd-vip-row a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #1D4ED8;
    color: #1D4ED8;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12.5px;
    margin-left: 8px;
}

.dg-evd-vip-row a:hover {
    background: #EFF6FF;
}

/* ---- 3 COLUMN INFO (Lineup / Schedule / Venue) ---- */
.dg-evd-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 26px;
}

.dg-evd-col h3 {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px;
}

.dg-evd-lineup-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}

.dg-evd-lineup-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 40px;
}

.dg-evd-lineup-item h5 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-lineup-item p {
    margin: 0;
    font-size: 11.5px;
    color: #64748B;
}

.dg-evd-highlights {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.dg-evd-highlights li {
    font-size: 12.5px;
    color: #475569;
    padding: 3px 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dg-evd-highlights li::before {
    content: '✓';
    color: #10B981;
    font-weight: 700;
}

.dg-evd-schedule-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}

.dg-evd-schedule-item .time {
    font-size: 12px;
    font-weight: 700;
    color: #1D4ED8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-evd-schedule-item .time::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1D4ED8;
    flex-shrink: 0;
}

.dg-evd-schedule-item h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-schedule-item p {
    margin: 0;
    font-size: 11.5px;
    color: #64748B;
}

.dg-evd-venue-map {
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: #E5E7EB url('https://maps.googleapis.com/maps/api/staticmap?center=Boston,MA&zoom=14&size=400x200&maptype=roadmap') center/cover;
    margin-bottom: 12px;
    position: relative;
}

.dg-evd-venue-map::after {
    content: '\f041';
    font-family: FontAwesome;
    color: #EF4444;
    font-size: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}

.dg-evd-venue h5 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-venue p {
    margin: 0 0 10px;
    font-size: 12px;
    color: #64748B;
}

/* Venue name / address / directions grouped into a clean card */
.dg-evd-venue-info {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.dg-evd-venue-info h5 {
    margin: 0 0 6px;
    font-size: 14px;
}

.dg-evd-venue-info .dg-evd-venue-profile {
    display: inline-block;
    margin-bottom: 10px;
    color: #1D4ED8;
    font-weight: 700;
    font-size: 12.5px;
}

.dg-evd-venue-info .dg-evd-venue-addr {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.5;
}

.dg-evd-venue-info .dg-evd-venue-dir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    color: #1D4ED8;
    font-weight: 700;
    font-size: 12.5px;
}

.dg-evd-venue-info .dg-evd-venue-dir:hover {
    background: #DBEAFE;
    border-color: #1D4ED8;
}

.dg-evd-venue-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.dg-evd-venue-pills span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 11px;
    color: #475569;
}

.dg-evd-venue-pills i {
    font-size: 10px;
    color: #64748B;
}

.dg-evd-venue-q {
    font-size: 12px;
    color: #475569;
    margin: 12px 0 4px;
}

.dg-evd-venue-q+a {
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 700;
}

/* ---- ABOUT + ORGANIZER ---- */
.dg-evd-about-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-bottom: 22px;
}

.dg-evd-about h3,
.dg-evd-organizer h3 {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px;
}

.dg-evd-about p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.65;
    margin: 0 0 10px;
    max-width: 540px;
}

.dg-evd-about-trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.dg-evd-org-card {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
}

.dg-evd-org-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 56px;
    background: #0F172A;
}

.dg-evd-org-body {
    flex: 1;
    min-width: 0;
}

.dg-evd-org-body h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-evd-org-body h4 .vfd {
    color: #1D4ED8;
    font-size: 13px;
}

.dg-evd-org-stats {
    font-size: 12px;
    color: #64748B;
    margin: 2px 0 6px;
}

.dg-evd-org-bio {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

.dg-evd-org-follow {
    background: #fff !important;
    color: #1D4ED8 !important;
    border: 1px solid #1D4ED8 !important;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    align-self: flex-start;
}

/* Share + Save row */
.dg-evd-share-row {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dg-evd-share-l {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dg-evd-share-l>span {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-share-icons {
    display: flex;
    gap: 8px;
}

.dg-evd-share-icons a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 13px;
}

.dg-evd-share-icons a:hover {
    color: #1D4ED8;
    border-color: #1D4ED8;
}

.dg-evd-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
}

.dg-evd-save:hover {
    color: #EF4444;
}

/* ---- RIGHT SIDEBAR (Your Order) ---- */
.dg-evd-side {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dg-evd-checkout-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 18px;
}

.dg-evd-order {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Your Ticket sits inside the same card, divided from the order above */
.dg-evd-checkout-card .dg-evd-yt {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #E5E7EB;
}

.dg-evd-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dg-evd-order-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
}

.dg-evd-order-head-r {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
    color: #64748B;
}

.dg-evd-order-head-r .sec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dg-evd-order-head-r .timer {
    color: #1D4ED8;
    font-weight: 700;
}

.dg-evd-order-item {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #F1F5F9;
}

.dg-evd-order-item:first-child {
    border-top: 0;
}

.dg-evd-order-item-ic {
    font-size: 16px;
}

.dg-evd-order-item.is-admission .dg-evd-order-item-ic {
    color: #2563EB;
}

.dg-evd-order-item.is-vip .dg-evd-order-item-ic {
    color: #F59E0B;
}

.dg-evd-order-item.is-couples .dg-evd-order-item-ic {
    color: #EC4899;
}

.dg-evd-order-item.is-group .dg-evd-order-item-ic {
    color: #8B5CF6;
}

.dg-evd-order-item h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-order-item p {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: #64748B;
}

.dg-evd-order-amount {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    min-width: 60px;
    text-align: right;
}

.dg-evd-order-tot {
    padding: 12px 0 4px;
    border-top: 1px solid #E5E7EB;
    margin-top: 4px;
}

.dg-evd-order-tot-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #475569;
    padding: 4px 0;
}

.dg-evd-order-tot-row.is-grand {
    font-size: 16px;
    padding: 10px 0 14px;
    border-top: 1px dashed #E5E7EB;
    margin-top: 6px;
}

.dg-evd-order-tot-row.is-grand strong {
    font-weight: 800;
    color: #0F172A;
}

.dg-evd-order-tot-row.is-grand strong span {
    font-size: 11px;
    color: #64748B;
    margin-left: 6px;
    font-weight: 600;
}

.dg-evd-buy-btn {
    width: 100%;
    background: #1D4ED8 !important;
    color: #fff !important;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    box-shadow: 0 6px 16px -6px rgba(29, 78, 216, .5);
}

.dg-evd-buy-btn:hover {
    background: #1E40AF !important;
    color: #fff !important;
}

.dg-evd-booked-pill {
    margin: 12px 0 0;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

.dg-evd-booked-pill i {
    color: #F59E0B;
}

/* Your Ticket card (dark phone mockup) */
.dg-evd-yt {
    background: transparent;
    padding: 0;
    color: #0F172A;
    position: relative;
}

.dg-evd-yt>h4 {
    margin: 0 0 14px;
    color: #0F172A;
    font-size: 16px;
    font-weight: 800;
}

/* ---- Phone-device mockup ---- */
.dg-evd-yt-phone {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
    background: #0B1024;
    border-radius: 34px;
    padding: 18px 14px 16px;
    /* bezel around the screen */
    box-shadow: 0 22px 48px -16px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06);
}

/* Camera notch / dot */
.dg-evd-yt-phone::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #334155;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.dg-evd-yt-bar {
    background: transparent;
    color: #fff;
    padding: 2px 4px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
}

.dg-evd-yt-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-evd-yt-bar i {
    color: #94A3B8;
    cursor: pointer;
}

.dg-evd-yt-bar span i {
    color: #2563EB;
    font-size: 12px;
}

.dg-evd-yt-body {
    padding: 0;
}

.dg-evd-yt-img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: 12px;
}

.dg-evd-yt-info {
    padding: 12px 4px 0;
}

.dg-evd-yt-info h5 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.dg-evd-yt-info p {
    margin: 0 0 2px;
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.45;
}

.dg-evd-yt-type {
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.dg-evd-yt-type strong {
    color: #fff;
}

.dg-evd-yt-type span {
    color: #94A3B8;
    font-weight: 600;
}

.dg-evd-yt-qr {
    padding: 16px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dg-evd-yt-qr img {
    width: 150px;
    height: 150px;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
}

.dg-evd-yt-qr .pg {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 600;
}

/* White Apple-Wallet pill card */
.dg-evd-yt-wallet {
    margin: 12px 0 0;
    background: #fff;
    color: #0F172A;
    padding: 11px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3);
}

.dg-evd-yt-wallet i {
    font-size: 16px;
}

.dg-evd-yt-foot {
    background: transparent;
    padding: 14px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.5;
}

.dg-evd-yt-foot strong {
    color: #0F172A;
    font-weight: 700;
}

.dg-evd-yt-foot i.fa-check-circle {
    color: #10B981;
}

/* You Might Also Like */
.dg-evd-like {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px;
}

.dg-evd-like-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dg-evd-like-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
}

.dg-evd-like-head a {
    font-size: 12.5px;
    font-weight: 700;
    color: #1D4ED8;
}

.dg-evd-like-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dg-evd-like-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

.dg-evd-like-card-media {
    position: relative;
    height: 110px;
    overflow: hidden;
}

.dg-evd-like-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-evd-like-card-media .dg-evd-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10.5px;
    padding: 3px 8px;
}

.dg-evd-like-card-media .fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F172A;
    font-size: 11px;
}

.dg-evd-like-card-body {
    padding: 10px;
}

.dg-evd-like-card-body h5 {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
}

.dg-evd-like-card-body p {
    margin: 0 0 2px;
    font-size: 10.5px;
    color: #64748B;
}

.dg-evd-like-card-body .price {
    font-size: 12px;
    font-weight: 800;
    color: #EF4444;
}

.dg-evd-like-arrows {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    color: #94A3B8;
}

.dg-evd-like-arrows .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
}

.dg-evd-like-arrows .dot.is-active {
    background: #1D4ED8;
}

.dg-evd-like-arrows i {
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
}

/* Bottom trust bar */
.dg-evd-trust {
    background: #0B1024;
    color: #fff;
    border-radius: 14px;
    padding: 18px 24px;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.dg-evd-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dg-evd-trust-item .ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex: 0 0 38px;
}

.dg-evd-trust-item h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.dg-evd-trust-item p {
    margin: 0;
    font-size: 11.5px;
    color: #94A3B8;
}

@media (max-width: 1100px) {
    .dg-evd-grid {
        grid-template-columns: 1fr;
    }

    .dg-evd-tickets {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-evd-3col,
    .dg-evd-about-row {
        grid-template-columns: 1fr;
    }

    .dg-evd-trust {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-evd-info-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dg-evd-tickets {
        grid-template-columns: 1fr;
    }

    .dg-evd-trust {
        grid-template-columns: 1fr;
    }

    /* Share row: stack vertically so the label, icons and Save link
       stop cramming into one line and wrapping awkwardly. */
    .dg-evd-share-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .dg-evd-share-l {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dg-evd-share-l>span {
        font-size: 14px;
    }

    .dg-evd-share-icons {
        gap: 10px;
    }

    .dg-evd-share-row .dg-evd-save {
        justify-content: center;
        padding: 10px 0;
        border-top: 1px solid #E5E7EB;
    }
}

/* =========================================================
   DekoGo Profile / Pass Dashboard
   Scoped under .dgo-pass to avoid leaking to header/footer.
   ========================================================= */

.dgo-pass {
    --dg-blue: #2563EB;
    --dg-blue-2: #1D4ED8;
    --dg-blue-soft: #EFF6FF;
    --dg-dark: #0B1220;
    --dg-dark-2: #111827;
    --dg-text: #0F172A;
    --dg-muted: #6B7280;
    --dg-border: #E5E7EB;
    --dg-yellow: #F59E0B;
    --dg-red: #EF4444;
    --dg-green: #10B981;
    --dg-purple: #7C3AED;
    --dg-pink: #EC4899;
    --dg-radius: 14px;
    --dg-radius-lg: 18px;
    --dg-shadow: 0 6px 22px rgba(15, 23, 42, .08);
    color: var(--dg-text);
    background: #F8FAFC;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    padding: 32px 0 60px;
}

.dgo-pass *,
.dgo-pass *::before,
.dgo-pass *::after {
    box-sizing: border-box;
}

.dgo-pass img {
    max-width: 100%;
    display: block;
}

.dgo-pass a {
    text-decoration: none;
    color: inherit;
}

/* Specificity overrides — `.dgo-pass a` above is (0,1,1) and outranks the button
   classes (0,1,0), so anchor buttons silently inherit their container's text
   colour instead of their own: grey (#64748B) inside .dgo-empty, near-black in a
   card. Re-assert each button's colour at matching specificity. Mirrors the
   equivalent `.dgp` block further down this file. */
.dgo-pass a.dgo-btn-primary,
.dgo-pass a.dgo-btn-primary:hover,
.dgo-pass a.dgo-btn-primary:focus {
    color: #fff;
}

.dgo-pass a.dgo-btn-outline,
.dgo-pass a.dgo-btn-outline:hover,
.dgo-pass a.dgo-btn-outline:focus {
    color: var(--dg-blue);
}

.dgo-pass a.dgo-btn-ghost-dark,
.dgo-pass a.dgo-btn-ghost-dark:hover {
    color: #fff;
}

.dgo-pass ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dgo-container {
    width: 100%;
    max-width: 1634px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Layout grid ---------- */
.dgo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

/* ---------- Header / title row ---------- */
.dgo-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.dgo-head> :first-child {
    grid-column: 1 / span 2;
}

.dgo-head .dgo-passid {
    grid-column: 3;
    justify-self: center;
}

.dgo-head h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--dg-text);
}

.dgo-head .dgo-sub {
    color: var(--dg-muted);
    margin: 0;
    font-size: 14px;
}

.dgo-passid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748B;
    font-weight: 500;
    font-size: 14px;
}

.dgo-passid button {
    background: transparent;
    border: 0;
    color: var(--dg-blue);
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 767px) {
    .dgo-head {
        grid-template-columns: 1fr;
    }

    .dgo-head> :first-child {
        grid-column: 1;
    }

    .dgo-head .dgo-passid {
        grid-column: 1;
        justify-self: flex-start;
    }
}

/* ---------- Stat cards row ---------- */
.dgo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
    align-items: stretch;
}

.dgo-stat {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dgo-stat-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dgo-stat-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dg-blue-soft);
    color: var(--dg-blue);
    font-size: 18px;
    flex-shrink: 0;
}

.dgo-stat-ic.is-purple {
    background: #F3E8FF;
    color: var(--dg-purple);
}

.dgo-stat-ic.is-yellow {
    background: #FEF3C7;
    color: var(--dg-yellow);
}

.dgo-stat h4 {
    font-size: 14px;
    color: var(--dg-muted);
    font-weight: 600;
    margin: 0 0 2px;
}

.dgo-stat .dgo-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--dg-text);
    line-height: 1.1;
}

.dgo-stat .dgo-stat-tier {
    font-size: 22px;
    font-weight: 800;
    color: var(--dg-yellow);
    line-height: 1.1;
}

.dgo-stat-meta {
    color: var(--dg-muted);
    font-size: 13px;
    margin: 6px 0 0;
}

.dgo-stat-meta strong {
    color: var(--dg-green);
    font-weight: 700;
}

.dgo-stat-next {
    margin-top: 12px;
    font-size: 13px;
    color: var(--dg-text);
}

.dgo-stat-next-time {
    color: var(--dg-muted);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.dgo-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dg-blue);
    font-weight: 600;
    font-size: 13px;
    margin-top: auto;
    padding-top: 12px;
    align-self: flex-start;
}

/* ---------- Tabs strip ---------- */
.dgo-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--dg-border);
    margin: 6px 0 22px;
    overflow-x: auto;
}

.dgo-tab {
    background: transparent;
    border: 0;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dg-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    margin-bottom: -1px;
}

.dgo-tab .dgo-pill {
    background: #E5E7EB;
    color: var(--dg-muted);
    font-size: 12px;
    border-radius: 999px;
    padding: 1px 9px;
    font-weight: 700;
}

.dgo-tab.is-active {
    color: var(--dg-blue);
    border-bottom-color: var(--dg-blue);
}

.dgo-tab.is-active .dgo-pill {
    background: var(--dg-blue);
    color: #fff;
}

/* ---------- Section heads ---------- */
.dgo-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 14px;
}

.dgo-section-head h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--dg-text);
}

.dgo-section-head .dgo-sub {
    color: var(--dg-muted);
    font-size: 13px;
    margin: 2px 0 0;
}

.dgo-section-head .dgo-link {
    color: var(--dg-blue);
    font-weight: 600;
    font-size: 13px;
}

/* ---------- Featured upcoming event ---------- */
.dgo-feat {
    background: #0B1220;
    color: #fff;
    border-radius: var(--dg-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 230px;
    gap: 0;
}

.dgo-feat-img {
    position: relative;
    height: 100%;
    min-height: 280px;
    background: #111;
}

.dgo-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dgo-feat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--dg-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
}

.dgo-feat-fav {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, .35);
    border: 0;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dgo-feat-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dgo-feat-status {
    display: inline-block;
    background: rgba(245, 158, 11, .18);
    color: var(--dg-yellow);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    width: fit-content;
}

.dgo-feat-title {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 6px;
    line-height: 1.2;
}

.dgo-feat-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #CBD5E1;
    font-size: 14px;
}

.dgo-feat-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dgo-feat-meta i {
    width: 16px;
    color: #94A3B8;
}

.dgo-feat-going {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #CBD5E1;
    font-size: 13px;
}

.dgo-avatars {
    display: inline-flex;
}

.dgo-avatars img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #0B1220;
    margin-left: -8px;
    object-fit: cover;
}

.dgo-avatars img:first-child {
    margin-left: 0;
}

.dgo-feat-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.dgo-btn-primary {
    background: var(--dg-blue);
    color: #fff;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    flex: 1;
    text-align: center;
}

.dgo-btn-primary:hover {
    background: var(--dg-blue-2);
    color: #fff;
}

.dgo-btn-ghost-dark {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
}

/* QR ticket panel */
.dgo-feat-qr {
    background: linear-gradient(180deg, #1E1B4B 0%, #0F172A 100%);
    padding: 18px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px dashed rgba(255, 255, 255, .18);
    position: relative;
}

.dgo-feat-qr-tag {
    background: var(--dg-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0;
    border-radius: 8px 8px 0 0;
    margin: -18px -16px 6px;
}

.dgo-feat-qr h5 {
    color: #CBD5E1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}

.dgo-feat-qr .dgo-qr-tix {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.dgo-feat-qr .dgo-qr-img {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    margin: 6px auto;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dgo-feat-qr .dgo-qr-img img {
    width: 100%;
    height: 100%;
}

.dgo-feat-qr .dgo-qr-id {
    color: #CBD5E1;
    font-size: 11px;
    letter-spacing: .03em;
}

.dgo-feat-qr .dgo-qr-id strong {
    color: #fff;
    display: block;
    font-size: 12px;
}

/* Quick actions strip below featured */
.dgo-quick {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 14px 4px;
    margin-top: 14px;
}

.dgo-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--dg-blue);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 4px;
    border-right: 1px solid var(--dg-border);
}

.dgo-quick a:last-child {
    border-right: 0;
}

.dgo-quick i {
    font-size: 18px;
}

.dgo-quick span {
    color: var(--dg-muted);
    font-weight: 500;
}

/* Small upcoming event cards */
.dgo-mini {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 14px;
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
}

.dgo-mini-img {
    width: 130px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.dgo-mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dgo-mini-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

.dgo-mini-badge {
    display: inline-block;
    background: #FFEDD5;
    color: #C2410C;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.dgo-mini-badge.is-green {
    background: #DCFCE7;
    color: #15803D;
}

/* Missed / Cancelled attendance */
.dgo-mini-badge.is-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.dgo-mini h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--dg-text);
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.dgo-mini-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--dg-muted);
    font-size: 13px;
}

.dgo-mini-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dgo-mini-meta i {
    width: 14px;
    color: #94A3B8;
}

.dgo-mini-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Buttons in a mini row are peers, so they must match exactly. The base
   .dgo-btn-primary carries flex:1 for the featured card's full-width row —
   neutralised here so PDF can't stretch while View Ticket stays natural width.
   Fixed height + inline-flex keeps both the same size with icons centred. */
.dgo-mini-actions .dgo-btn-outline,
.dgo-mini-actions .dgo-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.dgo-mini-actions .dgo-btn-primary i {
    font-size: 12px;
}

.dgo-btn-outline {
    background: #fff;
    color: var(--dg-blue);
    border: 1px solid var(--dg-blue);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.dgo-btn-outline:hover {
    background: var(--dg-blue-soft);
    color: var(--dg-blue);
}

.dgo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--dg-muted);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.dgo-icon-btn:hover {
    background: var(--dg-blue-soft);
    color: var(--dg-blue);
}

.dgo-view-more {
    text-align: center;
    margin: 18px 0;
}

.dgo-view-more a {
    color: var(--dg-blue);
    font-weight: 600;
    font-size: 14px;
}

/* Recommended For You carousel */
.dgo-reco {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--dg-border);
    position: relative;
}

/* Fit as many cards as the COLUMN allows, never a hard 4-up. The dashboard's
   main column is far narrower than the viewport, so `repeat(4, 1fr)` squeezed
   cards to ~188px on a wide screen and their buttons overflowed the card. */
.dgo-reco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dgo-reco-card {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    overflow: hidden;
    position: relative;
}

.dgo-reco-img {
    height: 130px;
    position: relative;
    overflow: hidden;
}

.dgo-reco-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dgo-reco-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 12px;
}

.dgo-reco-body {
    padding: 12px 14px 14px;
}

.dgo-reco-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--dg-text);
}

.dgo-reco-meta {
    color: var(--dg-muted);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.dgo-reco-price {
    color: var(--dg-red);
    font-weight: 700;
    font-size: 14px;
}

.dgo-reco-nav {
    position: absolute;
    right: -6px;
    top: 55%;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid var(--dg-border);
    box-shadow: var(--dg-shadow);
    color: var(--dg-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Bottom benefits banner ---------- */
.dgo-benefits {
    margin-top: 28px;
    background:
        radial-gradient(circle at 20% 50%, rgba(124, 58, 237, .20), transparent 45%),
        radial-gradient(circle at 80% 50%, rgba(37, 99, 235, .18), transparent 50%),
        linear-gradient(90deg, #0B1024 0%, #0B1224 50%, #0B1024 100%);
    color: #fff;
    border-radius: var(--dg-radius-lg);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: nowrap;
    border: 1px solid rgba(124, 58, 237, .18);
    box-shadow: 0 10px 30px rgba(11, 16, 36, .35);
}

.dgo-benefits-title {
    min-width: 230px;
}

.dgo-benefits-title h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #fff;
}

.dgo-benefits-title p {
    color: #94A3B8;
    margin: 0;
    font-size: 13px;
}

.dgo-benefits-items {
    display: flex;
    gap: 36px;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dgo-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 170px;
}

.dgo-benefit .ic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(167, 139, 250, .55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #A78BFA;
    font-size: 16px;
    flex-shrink: 0;
}

.dgo-benefit:nth-child(2) .ic {
    border-color: rgba(96, 165, 250, .55);
    color: #93C5FD;
}

.dgo-benefit:nth-child(3) .ic {
    border-color: rgba(167, 139, 250, .55);
    color: #C4B5FD;
}

.dgo-benefit:nth-child(4) .ic {
    border-color: rgba(96, 165, 250, .55);
    color: #93C5FD;
}

.dgo-benefit strong {
    font-size: 14px;
    font-weight: 700;
    display: block;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.2;
}

.dgo-benefit span {
    color: #94A3B8;
    font-size: 12px;
    line-height: 1.35;
    display: block;
    max-width: 140px;
}

.dgo-benefits .dgo-btn-primary {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--dg-blue);
    font-weight: 700;
}

@media (max-width: 1199px) {
    .dgo-benefits {
        flex-wrap: wrap;
    }

    .dgo-benefits-items {
        justify-content: flex-start;
    }
}

/* =====================================================
   RIGHT SIDEBAR
   ===================================================== */
.dgo-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 50px;
}

/* Pass card */
.dgo-pass-card {
    background: linear-gradient(155deg, #1E1B4B 0%, #0B1220 60%);
    color: #fff;
    border-radius: var(--dg-radius-lg);
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.dgo-pass-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--dg-radius-lg);
    padding: 1px;
    background: linear-gradient(180deg, rgba(124, 58, 237, .6), rgba(37, 99, 235, .2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.dgo-pass-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

.dgo-pass-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--dg-purple);
    padding: 2px;
    background: #fff;
    flex-shrink: 0;
}

.dgo-pass-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dgo-pass-head h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px;
}

.dgo-pass-head p {
    color: #94A3B8;
    font-size: 12px;
    margin: 0;
}

.dgo-pass-status {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(16, 185, 129, .15);
    color: var(--dg-green);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, .4);
}

.dgo-pass-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 6px;
}

.dgo-pass-tier-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.dgo-pass-tier-name i {
    color: var(--dg-yellow);
}

.dgo-pass-pts {
    font-weight: 700;
}

.dgo-pass-card p.dgo-pass-desc {
    color: #CBD5E1;
    font-size: 12px;
    margin: 0 0 12px;
}

.dgo-progress {
    height: 6px;
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    overflow: hidden;
}

.dgo-progress span {
    display: block;
    height: 100%;
    width: 67%;
    background: linear-gradient(90deg, var(--dg-purple), var(--dg-pink));
    border-radius: 999px;
}

.dgo-pass-foot {
    margin-top: 10px;
    font-size: 12px;
    color: #CBD5E1;
}

.dgo-pass-link {
    display: inline-block;
    margin-top: 12px;
    color: #A78BFA;
    font-weight: 600;
    font-size: 13px;
}

.dgo-pass-inner {
    margin-top: 14px;
    padding: 14px 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(124, 58, 237, .45);
    background: rgba(124, 58, 237, .05);
    position: relative;
}

.dgo-pass-inner .dgo-pass-tier {
    margin: 0 0 6px;
}

.dgo-pass-inner .dgo-pass-foot {
    margin-top: 8px;
}

.dgo-elite {
    color: #A78BFA;
    font-weight: 700;
}

/* Notifications */
.dgo-card {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 18px;
}

.dgo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dgo-card-head h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.dgo-card-head .dgo-link {
    color: var(--dg-blue);
    font-weight: 600;
    font-size: 13px;
}

.dgo-notif {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--dg-border);
}

.dgo-notif:last-of-type {
    border-bottom: 0;
}

.dgo-notif-ic {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--dg-blue-soft);
    color: var(--dg-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dgo-notif-ic.is-purple {
    background: #F3E8FF;
    color: var(--dg-purple);
}

.dgo-notif-ic.is-orange {
    background: #FFEDD5;
    color: #C2410C;
}

.dgo-notif h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 2px;
}

.dgo-notif p {
    font-size: 12px;
    color: var(--dg-muted);
    margin: 0;
}

.dgo-notif-time {
    color: var(--dg-muted);
    font-size: 11px;
    white-space: nowrap;
}

.dgo-notif-body {
    flex: 1;
    min-width: 0;
}

.dgo-notif-body .dgo-notif-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.dgo-see-all {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--dg-border);
    border-radius: 10px;
    color: var(--dg-blue);
    font-weight: 600;
    font-size: 13px;
}

/* Your Deals (sidebar) */
.dgo-deals-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--dg-border);
    margin-bottom: 6px;
}

.dgo-deals-tabs button {
    background: transparent;
    border: 0;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dg-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.dgo-deals-tabs button.is-active {
    color: var(--dg-blue);
    border-color: var(--dg-blue);
}

.dgo-deal {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgo-deal:last-of-type {
    border-bottom: 0;
}

.dgo-deal-img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.dgo-deal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dgo-deal-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--dg-pink);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dgo-deal-badge.is-purple {
    background: var(--dg-purple);
}

.dgo-deal-badge.is-orange {
    background: #F97316;
}

.dgo-deal-badge.is-red {
    background: var(--dg-red);
}

.dgo-deal h5 {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 3px;
    color: var(--dg-text);
}

.dgo-deal p {
    font-size: 12px;
    color: var(--dg-muted);
    margin: 0 0 2px;
}

.dgo-deal small {
    font-size: 11px;
    color: #94A3B8;
}

.dgo-deal .dgo-btn-outline {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 600;
}

/* Need help */
.dgo-help {
    background: linear-gradient(135deg, #E0E7FF 0%, #EDE9FE 50%, #F5D0FE 100%);
    border-radius: var(--dg-radius);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.dgo-help-body {
    flex: 1;
    min-width: 0;
}

.dgo-help-body h4 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--dg-text);
}

.dgo-help-body p {
    font-size: 13px;
    color: #475569;
    margin: 0 0 12px;
}

.dgo-help-body .dgo-btn-outline {
    padding: 9px 16px;
    font-size: 13px;
    background: #fff;
    border-color: #fff;
    color: var(--dg-blue);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.dgo-help-img {
    flex: 0 0 110px;
}

.dgo-help-img img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .6);
}

/* =====================================================
   Embedded settings forms (profile, password)
   ===================================================== */
.dgo-settings {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 22px;
    margin-top: 24px;
}

.dgo-settings h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
}

.dgo-settings .dgo-sub {
    color: var(--dg-muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.dgo-set-tabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid var(--dg-border);
    margin-bottom: 18px;
}

.dgo-set-tabs a {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dg-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.dgo-set-tabs a.active {
    color: var(--dg-blue);
    border-color: var(--dg-blue);
}

.dgo-settings .form-control {
    border-radius: 10px;
    border: 1px solid var(--dg-border);
    padding: 10px 14px;
    font-size: 14px;
}

.dgo-settings label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dg-text);
}

.dgo-settings .btn-success,
.dgo-settings .update-pass,
.dgo-settings .update-pro {
    background: var(--dg-blue);
    border: 0;
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 700;
}

.dgo-settings .btn-success:hover {
    background: var(--dg-blue-2);
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1199px) {
    .dgo-grid {
        grid-template-columns: 1fr;
    }

    /* No hard 2-up here: .dgo-grid has just gone full-width, so a fixed 2 columns
       would stretch each card to ~550px. The auto-fill track sizing above already
       adapts, down to a single column on phones. */
}

@media (max-width: 991px) {
    .dgo-stats {
        grid-template-columns: 1fr;
    }

    .dgo-feat {
        grid-template-columns: 1fr;
    }

    .dgo-feat-img {
        min-height: 220px;
    }

    .dgo-feat-qr {
        border-left: 0;
        border-top: 1px dashed rgba(255, 255, 255, .18);
    }
}

@media (max-width: 767px) {
    .dgo-container {
        padding: 0 16px;
    }

    .dgo-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dgo-mini {
        grid-template-columns: 1fr;
    }

    .dgo-mini-img {
        width: 100%;
        height: 160px;
    }

    /* Stacked row: actions span the full width and share it evenly, rather
       than huddling at the left edge under the text. */
    .dgo-mini-actions .dgo-btn-outline,
    .dgo-mini-actions .dgo-btn-primary {
        flex: 1 1 0;
    }

    .dgo-quick {
        grid-template-columns: repeat(3, 1fr);
    }

    .dgo-quick a:nth-child(3) {
        border-right: 0;
    }

    .dgo-reco-grid {
        grid-template-columns: 1fr;
    }

    .dgo-benefits-items {
        gap: 14px;
    }
}

/* ============================================================
   Deko Go — Checkout page (.dgco-*)
   ============================================================ */
.dgco-wrap {
    max-width: 1080px;
    margin: 30px auto 60px;
    padding: 0 18px;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
}

.dgco-back {
    color: #1d4ed8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.dgco-head h1 {
    margin: 10px 0 2px;
    font-size: 26px;
}

.dgco-head p {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}

.dgco-alert {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
    padding: 12px 14px;
    border-radius: 10px;
    margin: 16px 0;
    font-size: 14px;
}

.dgco-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

@media (max-width:900px) {
    .dgco-grid {
        grid-template-columns: 1fr;
    }
}

.dgco-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
}

.dgco-card h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.dgco-sub {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 16px;
}

.dgco-attendee {
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fafbfc;
}

.dgco-attendee-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dgco-tk-badge {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.dgco-tk-no {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.dgco-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

@media (max-width:620px) {
    .dgco-row3 {
        grid-template-columns: 1fr;
    }
}

.dgco-attendee label,
.dgco-card>label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 5px;
}

.dgco-attendee input,
.dgco-card-el {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6dee8;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    outline: none;
}

.dgco-attendee input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.dgco-card-el {
    padding: 14px 12px;
}

.dgco-card-err {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}

.dgco-side {
    position: sticky;
    top: 20px;
}

.dgco-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #475569;
    padding: 6px 0;
}

.dgco-sum-grand {
    font-size: 17px;
    color: #0f172a;
}

.dgco-sum-div {
    height: 1px;
    background: #eef2f7;
    margin: 8px 0;
}

.dgco-pay-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: #1d4ed8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.dgco-pay-btn:hover {
    background: #1e40af;
}

.dgco-pay-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.dgco-fine {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    margin: 10px 0 0;
}

/* ============================================================
   Deko Go — Payment success page (.dgps-*)
   ============================================================ */
.dgps-wrap {
    max-width: 620px;
    margin: 36px auto 70px;
    padding: 0 18px;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
}

.dgps-hero {
    text-align: center;
    margin-bottom: 22px;
}

.dgps-check {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, .08);
}

.dgps-hero h1 {
    margin: 0 0 6px;
    font-size: 26px;
}

.dgps-sub {
    color: #475569;
    font-size: 14px;
    margin: 0 auto 18px;
    max-width: 460px;
}

.dgps-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #0B1024;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 11px;
    transition: transform .12s, background .15s;
}

.dgps-download:hover {
    background: #1e293b;
    color: #fff;
    transform: translateY(-1px);
}

.dgps-event {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.dgps-event-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex: none;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.dgps-event h3 {
    margin: 0 0 3px;
    font-size: 17px;
}

.dgps-event p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.dgps-tickets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

/* Ticket stub: dark left rail + dashed perforation before the QR */
.dgps-stub {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #1d4ed8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.dgps-stub-main {
    flex: 1;
    padding: 16px 18px;
    min-width: 0;
}

.dgps-tk-type {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1d4ed8;
}

.dgps-tk-name {
    display: block;
    font-size: 17px;
    margin: 4px 0 2px;
}

.dgps-tk-meta {
    display: block;
    font-size: 12px;
    color: #94a3b8;
}

.dgps-tk-code {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #475569;
    letter-spacing: .06em;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
}

.dgps-stub-qr {
    width: 140px;
    flex: none;
    padding: 14px;
    text-align: center;
    border-left: 2px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
}

.dgps-stub-qr img {
    display: block;
}

.dgps-stub-qr span {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 6px;
}

.dgps-foot {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
}

.dgps-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.dgps-total strong {
    font-size: 18px;
}

.dgps-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.dgps-btn,
.dgps-btn-ghost {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.dgps-btn {
    background: #1d4ed8;
    color: #fff;
}

.dgps-btn:hover {
    background: #1e40af;
    color: #fff;
}

.dgps-btn-ghost {
    background: #f1f5f9;
    color: #0f172a;
}

.dgps-btn-ghost:hover {
    background: #e2e8f0;
    color: #0f172a;
}

@media (max-width:520px) {
    .dgps-stub {
        flex-direction: column;
    }

    .dgps-stub-qr {
        width: auto;
        border-left: 0;
        border-top: 2px dashed #cbd5e1;
    }

    .dgps-actions {
        flex-direction: column;
    }
}

/* ============================================================
   Deko Go — Ticket scan / verification page (.dgsc-*)
   ============================================================ */
.dgsc-wrap {
    max-width: 460px;
    margin: 40px auto 70px;
    padding: 0 18px;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
}

.dgsc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 30px 26px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px -18px rgba(15, 23, 42, .18);
}

.dgsc-card.dgsc-invalid {
    border-color: #fecaca;
}

/* Dead ends that aren't failures — withdrawn, expired, already handled. A red
   border on "already accepted" reads as an error the recipient has to fix. */
.dgsc-card.dgsc-caution {
    border-color: #fde68a;
}

.dgsc-card.dgsc-neutral {
    border-color: #e2e8f0;
}

.dgsc-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.dgsc-icon-ok {
    background: #dcfce7;
    color: #16a34a;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, .08);
}

.dgsc-icon-bad {
    background: #fee2e2;
    color: #dc2626;
    box-shadow: 0 0 0 8px rgba(220, 38, 38, .08);
}

/* A withdrawn or expired transfer is a dead end, but not an error the
   recipient caused — amber reads as "nothing to do here", not "something broke". */
.dgsc-icon-warn {
    background: #fef3c7;
    color: #b45309;
    box-shadow: 0 0 0 8px rgba(180, 83, 9, .08);
}

.dgsc-icon-info {
    background: #e0f2fe;
    color: #0369a1;
    box-shadow: 0 0 0 8px rgba(3, 105, 161, .08);
}

.dgsc-card h1 {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* :not([class]) so this only claims the plain body copy — .dgsc-note and
   .dgsc-warn are also <p> in a card and would otherwise lose to it on
   specificity and have their own spacing/colour flattened. */
.dgsc-card > p:not([class]) {
    margin: 0 0 2px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
}

.dgsc-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dgsc-status.in {
    background: #dcfce7;
    color: #15803d;
}

.dgsc-status.pending {
    background: #fef3c7;
    color: #a16207;
}

.dgsc-event {
    margin: 18px 0;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dgsc-event strong {
    font-size: 16px;
}

.dgsc-event span {
    font-size: 12.5px;
    color: #64748b;
}

.dgsc-rows {
    text-align: left;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    overflow: hidden;
}

.dgsc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.dgsc-row:last-child {
    border-bottom: 0;
}

.dgsc-row span {
    color: #94a3b8;
}

.dgsc-row strong {
    text-align: right;
    word-break: break-word;
}

.dgsc-row code,
.dgsc-code {
    font-family: monospace;
    font-size: 12px;
    color: #475569;
    letter-spacing: .05em;
}

.dgsc-code {
    display: inline-block;
    margin-top: 10px;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 7px;
}

/* inline-flex, not the browser default: on an <a> this rule is also used on,
   `display:inline` drops width/vertical padding/margin, so the pill collapsed
   to its text and overlapped the paragraph above it. */
.dgsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: #16a34a;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.dgsc-btn:hover {
    background: #15803d;
    color: #fff;
    text-decoration: none;
}

.dgsc-btn:active {
    transform: translateY(1px);
}

.dgsc-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .35);
}

.dgsc-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.dgsc-btn.is-undo {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

.dgsc-btn.is-undo:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.dgsc-btn.is-undo:focus-visible {
    box-shadow: 0 0 0 3px rgba(100, 116, 139, .3);
}

/* Secondary/quiet action — a text link that still lines up with the buttons. */
.dgsc-btn.is-quiet {
    background: transparent;
    border-color: transparent;
    color: #475569;
    font-weight: 600;
    margin-top: 10px;
    padding: 10px;
}

.dgsc-btn.is-quiet:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Stacks the primary + secondary actions with one consistent rhythm, so the
   markup no longer needs per-form inline flex/margin styles. */
.dgsc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.dgsc-actions form {
    margin: 0;
}

.dgsc-actions .dgsc-btn {
    margin-top: 0;
}

.dgsc-note {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

.dgsc-note.is-error {
    color: #a4361f;
}

/* A short caution that belongs to the action it sits above — the flat grey
   note style let it read as boilerplate and get skipped. */
.dgsc-warn {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.55;
    color: #854d0e;
}

.dgsc-warn i {
    margin-top: 2px;
    color: #d97706;
}

@media (max-width: 480px) {
    .dgsc-wrap {
        margin: 24px auto 48px;
    }

    .dgsc-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .dgsc-card h1 {
        font-size: 20px;
    }
}

/* =====================================================================
   Deko Go — Pass page (profile), event-feedback modal, shared helpers.
   Extracted from inline styles so markup stays clean.
   ===================================================================== */

/* Filled favourite heart (server-rendered + JS-toggled use the same class) */
.fa-heart.is-faved {
    color: #EF4444;
}

/* Empty-state block (resources/views/website/user/partials/_dgo_empty) */
.dgo-empty {
    text-align: center;
    padding: 42px 16px;
    color: #64748B;
}

.dgo-empty .dgo-empty-ic {
    font-size: 34px;
    opacity: .45;
}

.dgo-empty p {
    margin: 14px 0 16px;
    font-size: 15px;
}

.dgo-muted-note {
    padding: 8px 2px;
}

/* Past-event "your rating" line on the pass page */
.dgo-myrating {
    margin-top: 6px;
}

.dgo-myrating.is-hidden {
    display: none;
}

.dgo-stars-static i {
    color: #F59E0B;
}

.dgo-myrating-lbl {
    font-size: 12px;
    color: #64748B;
}

/* Event "ended" notice on the detail page */
.dg-evd-ended-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 6px 0 18px;
    font-weight: 600;
}

.dg-evd-ended-banner i {
    font-size: 18px;
}

/* Event feedback / rating modal (pass page) */
.dgo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* display:flex above beats the UA [hidden] rule, so hide explicitly */
.dgo-modal-overlay[hidden] {
    display: none;
}

.dgo-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 460px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.dgo-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dgo-modal-head h3 {
    margin: 0;
    font-size: 18px;
}

.dgo-modal-sub {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 14px;
}

.dgo-modal-close {
    background: none;
    border: 0;
    font-size: 20px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
}

.dgo-modal-form {
    margin-top: 18px;
}

.dgo-stars {
    display: flex;
    gap: 6px;
    font-size: 30px;
    color: #E2E8F0;
    margin-bottom: 6px;
}

.dgo-star {
    cursor: pointer;
    transition: color .12s;
}

.dgo-rating-hint {
    color: #94A3B8;
    display: block;
    margin-bottom: 14px;
}

.dgo-modal-input,
.dgo-modal-textarea {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

.dgo-modal-input {
    margin-bottom: 10px;
}

.dgo-modal-textarea {
    resize: vertical;
}

.dgo-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* =====================================================================
   Moved out of index.blade.php — "Near You" / "Deals" horizontal sliders
   ===================================================================== */
/* "What's Happening Near You" — horizontal slider with floating arrows */
.dg-near-slider {
    position: relative;
}

.dg-near-arrow {
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    z-index: 6;
    width: 40px;
    height: 40px;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background: #fff;
    color: #0F172A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    transition: background .15s, color .15s, opacity .15s, transform .15s;
}

.dg-near-arrow-prev {
    left: -14px;
}

.dg-near-arrow-next {
    right: -14px;
}

.dg-near-arrow:hover {
    background: #1D4ED8;
    color: #fff;
}

.dg-near-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .dg-near-arrow-prev {
        left: 4px;
    }

    .dg-near-arrow-next {
        right: 4px;
    }
}

/* Override the grid → a scroll-snapping horizontal track.
       NOTE: no !important — inactive tab panes carry inline display:none and must stay hidden. */
.dg-near-rail {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.dg-near-rail::-webkit-scrollbar {
    display: none;
}

.dg-near-rail>.dg-event-card {
    flex: 0 0 calc(20% - 9.6px);
    min-width: calc(20% - 9.6px);
    scroll-snap-align: start;
}

/* Trending Now shows 6 per view on desktop (other near-rails stay at 5). */
@media (min-width: 1101px) {
    .dg-near-rail.dg-trend-row>.dg-event-card {
        flex: 0 0 calc(16.666% - 10px);
        min-width: calc(16.666% - 10px);
    }
}

@media (max-width: 1100px) {
    .dg-near-rail>.dg-event-card {
        flex-basis: calc(33.333% - 8px);
        min-width: calc(33.333% - 8px);
    }
}

@media (max-width: 768px) {
    .dg-near-rail>.dg-event-card {
        flex-basis: calc(50% - 6px);
        min-width: calc(50% - 6px);
    }
}

@media (max-width: 480px) {
    .dg-near-rail>.dg-event-card {
        flex-basis: 80%;
        min-width: 80%;
    }
}

/* "Deals & Experiences" — same horizontal slider */
.dg-deals-row {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.dg-deals-row::-webkit-scrollbar {
    display: none;
}

.dg-deals-row>.dg-event-card {
    flex: 0 0 calc(20% - 9.6px);
    min-width: calc(20% - 9.6px);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .dg-deals-row>.dg-event-card {
        flex-basis: calc(33.333% - 8px);
        min-width: calc(33.333% - 8px);
    }
}

@media (max-width: 768px) {
    .dg-deals-row>.dg-event-card {
        flex-basis: calc(50% - 6px);
        min-width: calc(50% - 6px);
    }
}

@media (max-width: 480px) {
    .dg-deals-row>.dg-event-card {
        flex-basis: 80%;
        min-width: 80%;
    }
}

/* =====================================================================
   Moved out of all_event_ticket.blade.php — rails slider + results grid
   ===================================================================== */
/* Tonight / This Weekend / Upcoming — horizontal slider with floating arrows */
.dg-ae-slider {
    position: relative;
}

.dg-ae-rail {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.dg-ae-rail::-webkit-scrollbar {
    display: none;
}

.dg-ae-rail>.dg-ae-card,
.dg-ae-rail>.dg-event-card {
    flex: 0 0 calc(20% - 11.2px);
    min-width: calc(20% - 11.2px);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {

    .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(33.333% - 9.4px);
        min-width: calc(33.333% - 9.4px);
    }
}

@media (max-width: 768px) {

    .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(50% - 7px);
        min-width: calc(50% - 7px);
    }
}

@media (max-width: 480px) {

    .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: 82%;
        min-width: 82%;
    }
}

.dg-ae-arrow-prev {
    left: -14px;
    right: auto;
}

.dg-ae-arrow-next {
    right: -14px;
    left: auto;
}

.dg-ae-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .dg-ae-arrow-prev {
        left: 4px;
    }

    .dg-ae-arrow-next {
        right: 4px;
    }
}

/* ---- Card overlap fixes (apply to both the rail slider and the AJAX results grid) ---- */
/* Badges: stacked top-left, wrapping, and kept clear of the fav heart on the right */
.dg-ae-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 50px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dg-ae-card-badges .dg-ae-card-badge {
    position: static;
    top: auto;
    left: auto;
    right: auto;
}

/* Time moves to the bottom-RIGHT so it no longer sits on top of the date overlay (bottom-left) */
.dg-ae-card-time {
    left: auto;
    right: 10px;
}

/* Keep the results grid cards identical in size to the slider cards at every breakpoint
       (same 5 / 3 / 2 / 1 column scheme), so the card looks the same with or without a filter. */
.dg-ae-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .dg-ae-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dg-ae-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .dg-ae-grid {
        grid-template-columns: 1fr;
    }
}

.dg-ae-grid>.dg-ae-card,
.dg-ae-rail>.dg-ae-card,
.dg-ae-rail>.dg-event-card {
    width: 100%;
}

/* =====================================================================
   Moved out of event_detail.blade.php — dynamic-state + carousel styles
   ===================================================================== */
/* Dynamic-state styles for the event detail page */
.dg-evd-ticket.is-soldout {
    opacity: .62;
    filter: grayscale(.35);
}

.dg-evd-ticket.is-soldout .dg-evd-ticket-head h4 {
    text-decoration: line-through;
}

.dg-evd-soldout-tag {
    font-weight: 800;
    color: #DC2626;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dg-evd-ticket-mini-badge.is-soldout {
    background: #FEE2E2;
    color: #B91C1C;
}

.dg-evd-ticket-left {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #B45309;
    background: #FEF3C7;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Not-yet-on-sale / sales-closed tickets — dimmed and not selectable */
.dg-evd-ticket.is-unavailable {
    opacity: .7;
}

.dg-evd-ticket.is-unavailable .dg-evd-qty {
    display: none;
}

/* "Available …" / "Sales closed …" note under the perks list */
.dg-evd-ticket-avail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #B45309;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    padding: 3px 10px;
    border-radius: 999px;
}

.dg-evd-ticket-avail.is-closed {
    color: #475569;
    background: #F1F5F9;
    border-color: #E2E8F0;
}

/* Footer status tags for the window states */
.dg-evd-soldout-tag.is-upcoming {
    color: #B45309;
}

.dg-evd-soldout-tag.is-closed {
    color: #64748B;
}

/* Mini badges for the window states — amber "Coming Soon", slate "Sales Closed" */
.dg-evd-ticket-mini-badge.is-upcoming {
    background: #FEF3C7;
    color: #B45309;
}

.dg-evd-ticket-mini-badge.is-closed {
    background: #F1F5F9;
    color: #475569;
}

/* Promo-code tiers are listed on purpose, so the badge invites rather than
   refuses — violet reads as "there is a way in", not "this is over". */
.dg-evd-ticket-mini-badge.is-locked {
    background: #EDE9FE;
    color: #6D28D9;
}

.dg-evd-buy-btn.is-disabled,
.dg-evd-buy-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.dg-evd-save.is-saved {
    color: #DC2626;
    border-color: #DC2626;
}

.dg-evd-save.is-saved i {
    color: #DC2626;
}

.dg-evd-copy-link i.fa-check {
    color: #16A34A;
}

.dg-evd-thumb {
    cursor: pointer;
}

.dg-evd-thumb.is-active {
    outline: 3px solid #2563EB;
    outline-offset: 1px;
}

/* Hero video stage */
.dg-evd-hero-video {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 5;
}

.dg-evd-hero-video-slot,
.dg-evd-hero-video-slot iframe,
.dg-evd-hero-video-slot video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}

.dg-evd-hero-video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.dg-evd-hero-video-close:hover {
    background: rgba(0, 0, 0, .85);
}

/* "You Might Also Like" — working horizontal carousel */
.dg-evd-like-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 4px;
}

.dg-evd-like-grid::-webkit-scrollbar {
    display: none;
}

.dg-evd-like-grid .dg-evd-like-card {
    flex: 0 0 calc(50% - 6px);
    min-width: calc(50% - 6px);
    scroll-snap-align: start;
}

.dg-evd-like-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.dg-evd-like-arrows .fa-chevron-left,
.dg-evd-like-arrows .fa-chevron-right {
    cursor: pointer;
    color: #475569;
    padding: 6px;
    border-radius: 50%;
    transition: background .15s, color .15s;
}

.dg-evd-like-arrows .fa-chevron-left:hover,
.dg-evd-like-arrows .fa-chevron-right:hover {
    background: #EEF2FF;
    color: #1D4ED8;
}

.dg-evd-like-arrows .is-disabled {
    opacity: .3;
    pointer-events: none;
}

.dg-evd-like-dots {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.dg-evd-like-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: background .15s, width .15s;
}

.dg-evd-like-dots .dot.is-active {
    background: #1D4ED8;
    width: 18px;
    border-radius: 4px;
}

/* "Your Ticket" preview pager (sits on the white ticket face) */
.dg-evd-yt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.dg-evd-yt-nav button {
    width: 26px;
    height: 26px;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background: #F1F5F9;
    color: #1D4ED8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background .15s, color .15s;
}

.dg-evd-yt-nav button:hover {
    background: #1D4ED8;
    color: #fff;
}

.dg-evd-yt-nav button.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.dg-evd-yt-nav .pg {
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    min-width: 46px;
    text-align: center;
}

/* Real interactive venue map (replaces the dead static-map background) */
.dg-evd-venue-map {
    background: #E5E7EB;
    height: 160px;
}

.dg-evd-venue-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.dg-evd-venue-map::after {
    content: none;
}

/* Type-specific "Event Details" list */
.dg-evd-typemeta {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dg-evd-typemeta li {
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
    min-width: 0;
}

.dg-evd-typemeta li:last-child {
    border-bottom: 0;
}

.dg-evd-typemeta .label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94A3B8;
    margin-bottom: 2px;
}

.dg-evd-typemeta .value {
    display: block;
    font-size: 13.5px;
    color: #0F172A;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dg-evd-typemeta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1D4ED8;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.dg-evd-typemeta-link:hover {
    background: #1D4ED8;
    color: #fff;
}

/* Schedule item: keep alignment tidy even when an item has no time */
.dg-evd-schedule-item .time:empty::before {
    opacity: .4;
}

/* Empty states (no demo/dummy fallback data) */
.dg-evd-tickets-empty {
    padding: 28px 20px;
    text-align: center;
    color: #94A3B8;
    border: 1px dashed #E2E8F0;
    border-radius: 14px;
    background: #F8FAFC;
}

.dg-evd-tickets-empty i {
    font-size: 22px;
    display: block;
    margin-bottom: 8px;
    color: #CBD5E1;
}

.dg-evd-tickets-empty p {
    margin: 0;
    font-size: 13.5px;
}

.dg-evd-order-empty {
    padding: 18px 4px;
    text-align: center;
    color: #94A3B8;
    font-size: 13px;
    margin: 0;
}

/* =====================================================================
   Deko Go — Checkout page (.dgco2-*) and Success page (.dgps2-*)
   ===================================================================== */
.dgco2,
.dgps2 {
    background: #F1F5F9;
    padding: 24px 0 60px;
}

/* Match the Deko Go pages: same max-width + equal fluid side gutters */
.dgco2-wrap,
.dgps2-wrap {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
}

/* ---- Checkout top bar ---- */
.dgco2-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dgco2-title h1 {
    font-size: 26px;
    margin: 0;
    font-weight: 800;
    color: #0F172A;
}

.dgco2-title p {
    margin: 2px 0 0;
    color: #64748B;
    font-size: 14px;
}

.dgco2-steps {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.dgco2-step {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
}

.dgco2-step b {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dgco2-step.is-active {
    color: #1D4ED8;
}

.dgco2-step.is-active b {
    background: #1D4ED8;
    color: #fff;
}

.dgco2-secure {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 14px;
}

.dgco2-secure i {
    color: #16A34A;
    font-size: 18px;
}

.dgco2-secure strong {
    display: block;
    font-size: 13px;
    color: #0F172A;
}

.dgco2-secure span {
    font-size: 11px;
    color: #94A3B8;
}

.dgco2-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: #475569;
    font-size: 13px;
    margin: 6px 0 18px;
}

.dgco2-meta i {
    color: #2563EB;
    margin-right: 5px;
}

.dgco2-alert {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}

/* ---- Checkout grid ---- */
.dgco2-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

.dgco2-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
}

.dgco2-card h3 {
    font-size: 16px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0F172A;
}

.dgco2-card h3 em {
    font-style: normal;
    color: #94A3B8;
    font-weight: 500;
    font-size: 13px;
}

.dgco2-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1D4ED8;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.dgco2-attendee {
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.dgco2-attendee-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dgco2-chip {
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.dgco2-att-no {
    color: #94A3B8;
    font-size: 12px;
    font-weight: 600;
}

.dgco2-field2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dgco2-card label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}

.dgco2-card label i {
    color: #EF4444;
    font-style: normal;
}

.dgco2-card input[type=text],
.dgco2-card input[type=email],
.dgco2-card input[type=tel],
/* The accessibility field is a textarea and was missing from this list, so it fell back
   to the browser default — square corners and a grey border in a form where everything
   else is rounded. It read as a rendering fault rather than a field. */
.dgco2-card textarea {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
}

.dgco2-card textarea {
    /* Inherit the form's face — a textarea otherwise renders in the browser's
       monospace default and looks like a code box. */
    font-family: inherit;
    line-height: 1.5;
    min-height: 88px;
    /* Vertical only: a horizontally resizable box can be dragged out of the column. */
    resize: vertical;
}

.dgco2-card input:focus,
.dgco2-card textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Only flag a bad value once the buyer has actually typed something. */
.dgco2-card input:not(:placeholder-shown):invalid {
    border-color: #EF4444;
}

.dgco2-card input:not(:placeholder-shown):invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.dgco2-hint {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.4;
}

.dgco2-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    margin-bottom: 14px;
    font-weight: 500;
}

.dgco2-tk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgco2-tk-info strong {
    display: block;
    color: #0F172A;
}

.dgco2-tk-info span {
    display: block;
    color: #64748B;
    font-size: 12px;
}

/* What the ticket covers — party size, days, package contents (Part 1 §2).
   Toned apart from the grey sub-text so it reads as part of what is being bought
   rather than as small print. */
.dgco2-tk-info span.dgco2-tk-note {
    margin-top: 3px;
    color: #0F766E;
    font-weight: 600;
}

.dgco2-tk-price {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: right;
}

.dgco2-tk-unit {
    color: #64748B;
    font-size: 13px;
}

.dgco2-tk-qty {
    color: #94A3B8;
    font-size: 12px;
    margin: 0 6px;
}

/* Inline quantity stepper on the ticket row */
.dgco2-tk-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.dgco2-tk-stepper button {
    width: 28px;
    height: 28px;
    border: 0;
    background: #fff;
    color: #0F172A;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.dgco2-tk-stepper button:hover:not(:disabled) {
    background: #F1F5F9;
}

.dgco2-tk-stepper button:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
}

.dgco2-tk-qval {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    border-left: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    padding: 4px 0;
}

.dgco2-tk-total {
    min-width: 64px;
    color: #0F172A;
    font-weight: 700;
}

.dgco2-tk-price strong {
    color: #0F172A;
}

.dgco2-change {
    display: inline-block;
    margin-top: 10px;
    color: #2563EB;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.dgco2-addons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dgco2-addon {
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.dgco2-addon-body strong {
    display: block;
    color: #0F172A;
    font-size: 14px;
}

.dgco2-addon-body p {
    margin: 4px 0 6px;
    color: #64748B;
    font-size: 12px;
}

.dgco2-addon-price {
    color: #1D4ED8;
    font-weight: 700;
    font-size: 14px;
}

.dgco2-qty {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border: 1px solid #E2E8F0;
    border-radius: 9px;
    overflow: hidden;
    align-self: flex-start;
}

.dgco2-qty button {
    width: 30px;
    height: 34px;
    border: 0;
    background: #F8FAFC;
    color: #1D4ED8;
    font-size: 16px;
    cursor: pointer;
}

.dgco2-qty button:hover {
    background: #EFF6FF;
}

.dgco2-qty input {
    width: 34px;
    text-align: center;
    border: 0;
    border-left: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
    height: 34px;
    font-size: 14px;
}

.dgco2-promo {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.dgco2-promo input {
    flex: 1;
    min-width: 180px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

.dgco2-promo-btn {
    background: #0F172A;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
    cursor: pointer;
}

.dgco2-promo-btn:hover {
    background: #1E293B;
}

.dgco2-promo-msg {
    flex-basis: 100%;
    font-size: 13px;
    margin-top: 4px;
}

.dgco2-promo-msg.is-ok {
    color: #16A34A;
}

.dgco2-promo-msg.is-err {
    color: #DC2626;
}

.dgco2-pay-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
}

.dgco2-pay-opt.is-selected {
    border-color: #2563EB;
    background: #F8FAFF;
}

.dgco2-pay-label {
    font-weight: 600;
    color: #0F172A;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.dgco2-pay-label i {
    color: #2563EB;
    margin-right: 8px;
}

.dgco2-pay-label small {
    font-weight: 500;
    color: #94A3B8;
    font-size: 12px;
    margin-top: 2px;
}

.dgco2-pay-cards {
    margin-left: auto;
    color: #94A3B8;
    font-size: 22px;
    display: flex;
    gap: 6px;
}

.dgco2-card-fields {
    padding: 6px 0 4px;
}

.dgco2-paypal {
    padding: 8px 0 2px;
    max-width: 100%;
}

.dgco2-paypal[hidden] {
    display: none;
}

.dgco2-card-el {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
}

.dgco2-card-err {
    color: #DC2626;
    font-size: 13px;
    margin-top: 6px;
    min-height: 16px;
}

.dgco2-points-opt {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.dgco2-points-opt .dgco2-pay-label i {
    color: #F59E0B;
}

.dgco2-earn-note {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
    padding: 10px 14px;
    color: #1E40AF;
    font-size: 13px;
    margin-top: 6px;
}

.dgco2-earn-note i {
    color: #2563EB;
}

/* ---- Checkout summary (sticky) ---- */
.dgco2-side {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dgco2-summary {
    background: #0B1220;
    color: #E5E7EB;
    border-radius: 16px;
    padding: 20px;
}

.dgco2-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dgco2-summary-head h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

.dgco2-summary-head a {
    color: #60A5FA;
    font-size: 13px;
    text-decoration: none;
}

.dgco2-summary-event {
    display: flex;
    gap: 12px;
    margin: 14px 0;
}

.dgco2-summary-event img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
}

.dgco2-summary-event strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.dgco2-summary-event span {
    display: block;
    color: #94A3B8;
    font-size: 12px;
}

.dgco2-summary-lines,
.dgco2-sum-sub {
    border-top: 1px solid #1E293B;
    padding-top: 12px;
    margin-top: 4px;
}

.dgco2-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #CBD5E1;
    padding: 4px 0;
}

.dgco2-sum-row em {
    font-style: normal;
    color: #94A3B8;
}

/* Line items: name · "q × $unit" · line total (reference image 2) */
.dgco2-sum-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    padding: 4px 0;
}

.dgco2-sum-line .nm {
    flex: 1 1 auto;
    min-width: 0;
    color: #E5E7EB;
}

.dgco2-sum-line .qx {
    flex: 0 0 auto;
    color: #94A3B8;
    font-size: 12px;
    white-space: nowrap;
}

.dgco2-sum-line .amt {
    flex: 0 0 auto;
    min-width: 58px;
    text-align: right;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.dgco2-discount-row span:last-child,
.dgco2-points-row span:last-child {
    color: #34D399;
}

.dgco2-sum-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1E293B;
    margin-top: 10px;
    padding-top: 12px;
}

.dgco2-sum-grand span {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.dgco2-sum-grand strong {
    color: #fff;
    font-size: 18px;
}

.dgco2-sum-grand strong span {
    color: #60A5FA;
}

.dgco2-pay-btn {
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(90deg, #2563EB, #1D4ED8);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.dgco2-pay-btn:hover {
    filter: brightness(1.06);
}

.dgco2-pay-btn:disabled {
    opacity: .6;
    cursor: default;
}

.dgco2-fine {
    color: #64748B;
    font-size: 11px;
    text-align: center;
    margin: 10px 0 0;
}

.dgco2-pass-benefit {
    display: flex;
    gap: 10px;
    background: #111C30;
    border: 1px solid #1E293B;
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
}

.dgco2-pass-benefit i {
    color: #F59E0B;
}

.dgco2-pass-benefit strong {
    display: block;
    color: #fff;
    font-size: 13px;
}

.dgco2-pass-benefit span {
    color: #94A3B8;
    font-size: 12px;
}

/* Fee/tax explanation note under the summary */
.dgco2-fee-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #6B7280;
    background: #F8FAFC;
    border: 1px solid #EEF0F4;
    border-radius: 10px;
    padding: 10px 12px;
}

.dgco2-fee-note i {
    color: #2563EB;
    margin-right: 4px;
}

.dgco2-fee-note strong {
    color: #374151;
}

/* Trust panel: refund policy, payment methods, support */
.dgco2-trust {
    background: #fff;
    border: 1px solid var(--mp-border, #E5E7EB);
    border-radius: 16px;
    padding: 6px 18px;
    margin-bottom: 16px;
}

.dgco2-trust-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgco2-trust-row:last-child {
    border-bottom: none;
}

.dgco2-trust-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 14px;
}

.dgco2-trust-row strong {
    display: block;
    font-size: 13.5px;
    color: #111827;
    margin-bottom: 3px;
}

.dgco2-trust-row p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6B7280;
}

.dgco2-trust-row a {
    display: inline-block;
    margin-top: 5px;
    margin-right: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

.dgco2-trust-row a:hover {
    text-decoration: underline;
}

.dgco2-trust-cards {
    display: inline-flex;
    gap: 7px;
    margin-top: 7px;
    font-size: 20px;
    color: #94A3B8;
}

.dgco2-why {
    background: #0B1220;
    color: #E5E7EB;
    border-radius: 16px;
    padding: 18px 20px;
}

.dgco2-why h4 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 15px;
}

.dgco2-why ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.dgco2-why li {
    font-size: 13px;
    color: #CBD5E1;
}

.dgco2-why li i {
    color: #34D399;
    margin-right: 8px;
}

/* ---- Bottom trust / checkout bar ---- */
.dgco2-bottombar {
    display: grid;
    grid-template-columns: 1.25fr 1.15fr 1.25fr;
    align-items: center;
    background: #fff;
    border: 1.5px solid #DBEAFE;
    border-radius: 16px;
    padding: 20px 26px;
    margin-top: 18px;
    box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .15);
}

/* Vertical dividers between the three sections */
.dgco2-bottombar>*+* {
    border-left: 1px solid #E5E7EB;
    padding-left: 26px;
}

.dgco2-bb-item {
    display: flex;
    gap: 16px;
    align-items: center;
}

.dgco2-bb-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Standalone navy shield with a white check on top (no box) */
.dgco2-bb-ic-shield {
    width: 46px;
    height: 46px;
    color: #0F172A;
    font-size: 44px;
    line-height: 1;
}

.dgco2-bb-shield-check {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 15px;
}

.dgco2-bb-ic-mobile {
    width: 46px;
    height: 46px;
    color: #1D4ED8;
    font-size: 34px;
    line-height: 1;
}

.dgco2-bb-item strong {
    display: block;
    font-size: 15px;
    color: #0F172A;
    font-weight: 800;
}

.dgco2-bb-item p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #64748B;
    line-height: 1.45;
}

.dgco2-bb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 11.5px;
    color: #475569;
    font-weight: 600;
}

.dgco2-bb-tags i {
    color: #16A34A;
    margin-right: 3px;
}

.dgco2-bb-checkout {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* Total Due label stacked above the amount */
.dgco2-bb-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.dgco2-bb-total span {
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
}

.dgco2-bb-total strong {
    color: #0F172A;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.dgco2-bb-total strong em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    margin-right: 2px;
}

.dgco2-bb-pay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.dgco2-bb-btn {
    position: relative;
    background: linear-gradient(90deg, #2563EB, #1D4ED8);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 13px 44px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
}

/* Arrow pinned to the far-right edge; lock + label stay centered */
.dgco2-bb-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.dgco2-bb-btn:hover {
    filter: brightness(1.06);
}

.dgco2-bb-fine {
    margin: 2px 0 0;
    font-size: 11px;
    color: #94A3B8;
    text-align: center;
    max-width: 260px;
}

.dgco2-bb-fine a {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 860px) {
    .dgco2-bottombar {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Stack: dividers become top borders */
    .dgco2-bottombar>*+* {
        border-left: 0;
        border-top: 1px solid #E5E7EB;
        padding-left: 0;
        padding-top: 18px;
    }

    .dgco2-bb-checkout {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* ===================== SUCCESS PAGE ===================== */
.dgps2-hero {
    text-align: center;
    padding: 14px 0 26px;
}

.dgps2-check {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(22, 163, 74, .3);
}

/* Confetti burst around the success check (decorative, matches the confirmation art) */
.dgps2-check::before,
.dgps2-check::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: transparent;
    pointer-events: none;
}

.dgps2-check::before {
    box-shadow:
        -64px -26px 0 0 #F59E0B,
        58px -34px 0 0 #2563EB,
        -82px 8px 0 -1px #16A34A,
        76px -2px 0 -1px #EF4444,
        -38px -50px 0 -1px #8B5CF6,
        44px -54px 0 0 #F59E0B;
}

.dgps2-check::after {
    box-shadow:
        -52px 30px 0 -1px #2563EB,
        62px 26px 0 0 #16A34A,
        18px -64px 0 -1px #EF4444,
        -14px -62px 0 0 #2563EB,
        88px -30px 0 -2px #8B5CF6,
        -90px -16px 0 -2px #F59E0B;
}

/* Age-restriction badge overlaid on the ticket poster (e.g. "21+ EVENT") */
.dgps2-ticket-media {
    position: relative;
}

.dgps2-age-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.dgps2-hero h1 {
    font-size: 34px;
    margin: 0;
    font-weight: 800;
    color: #0F172A;
}

.dgps2-hero p {
    color: #64748B;
    margin: 8px 0 0;
}

.dgps2-hero a {
    color: #2563EB;
    font-weight: 600;
    text-decoration: none;
}

.dgps2-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 22px;
    align-items: start;
}

/* min-width:0 lets the column shrink below the slider's content width so the
   rail's own overflow-x:auto scrolls instead of widening the whole page */
.dgps2-main,
.dgco2-main {
    min-width: 0;
}

.dgps2-reco .dg-ae-rail,
.dg-ae-slider,
.dg-ae-rail {
    min-width: 0;
    max-width: 100%;
}

/* The success page's left column is narrower than the all-events page, so the
   5-column grid would squash the cards. Render the rail as a horizontal
   scroller with full-size cards (the prev/next arrows drive the scroll). */
.dgps2-reco .dg-ae-rail {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dgps2-reco .dg-ae-rail::-webkit-scrollbar {
    display: none;
}

.dgps2-reco .dg-ae-rail>.dg-event-card {
    flex: 0 0 265px;
    max-width: 265px;
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .dgps2-reco .dg-ae-rail>.dg-event-card {
        flex-basis: 82%;
        max-width: 82%;
    }
}

/* Header lives in the left column so the sidebar aligns to the very top */
.dgps2-main .dgps2-hero {
    padding: 6px 0 18px;
}

.dgps2-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dgps2-ticket {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 18px;
    align-items: center;
}

.dgps2-ticket-media img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
}

.dgps2-ticket-info h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #0F172A;
}

.dgps2-ticket-info ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.dgps2-ticket-info li {
    font-size: 13px;
    color: #475569;
}

.dgps2-ticket-info li i {
    color: #2563EB;
    width: 16px;
}

.dgps2-link {
    display: inline-block;
    color: #2563EB;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 10px;
}

/* Venue: bold name on the first line, address on a second line */
.dgps2-venue-li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.dgps2-venue {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dgps2-venue strong {
    color: #0F172A;
    font-weight: 600;
}

.dgps2-venue-addr {
    color: #64748B;
    font-size: 12px;
}

/* Stack the actions: "View Event Details" on its own line, then a full-width "Add to Calendar" */
.dgps2-ticket-info .dgps2-link {
    display: block;
}

.dgps2-ticket-info .dgps2-btn-outline {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Calendar + View Tickets side by side */
.dgps2-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dgps2-actions .dgps2-btn-outline {
    flex: 1 1 0;
    min-width: 130px;
    margin: 0;
}

/* Wallet buttons */
.dgps2-wallets {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dgps2-wallet-btn {
    flex: 1 1 0;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111827;
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #111827;
}

.dgps2-wallet-btn:hover {
    background: #000;
    color: #fff;
}

.dgps2-wallet-btn i {
    font-size: 15px;
}

.dgps2-ticket-qr {
    text-align: center;
    border-left: 1px dashed #E2E8F0;
    padding-left: 18px;
}

.dgps2-qr-tag {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dgps2-qr-type {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}

.dgps2-qr-id {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    margin-top: 8px;
}

.dgps2-qr-id strong {
    color: #0F172A;
    font-size: 12px;
}

.dgps2-qr-more {
    display: inline-block;
    font-size: 11px;
    color: #2563EB;
    margin-top: 6px;
    text-decoration: none;
    cursor: pointer;
}

.dgps2-qr-more:hover {
    text-decoration: underline;
}

.dgps2-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #2563EB;
    color: #2563EB;
    background: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.dgps2-btn-outline:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgps2-email {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dgps2-email-l {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dgps2-email i {
    color: #2563EB;
    font-size: 20px;
}

.dgps2-email strong {
    display: block;
    color: #0F172A;
    font-size: 14px;
}

.dgps2-email span {
    color: #64748B;
    font-size: 12px;
}

.dgps2-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.dgps2-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
}

.dgps2-card h4 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #0F172A;
}

.dgps2-card p {
    margin: 0 0 14px;
    color: #64748B;
    font-size: 13px;
}

.dgps2-share {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.dgps2-share a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #475569;
    font-size: 11px;
    text-decoration: none;
}

.dgps2-share a i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.dgps2-share .is-fb i {
    background: #1877F2;
}

.dgps2-share .is-x i {
    background: #000;
}

.dgps2-share .is-ig i {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
}

.dgps2-share .is-wa i {
    background: #25D366;
}

.dgps2-share .is-link i {
    background: #6366F1;
}

.dgps2-next {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.dgps2-next li {
    display: flex;
    gap: 12px;
}

.dgps2-next li i {
    color: #2563EB;
    font-size: 16px;
    margin-top: 2px;
}

.dgps2-next strong {
    display: block;
    color: #0F172A;
    font-size: 13px;
}

.dgps2-next span {
    color: #64748B;
    font-size: 12px;
}

.dgps2-reco h4 {
    font-size: 18px;
    color: #0F172A;
    margin: 0 0 14px;
}

.dgps2-reco-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.dgps2-reco-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.dgps2-reco-img img {
    width: 100%;
    height: 90px;
    object-fit: cover;
}

.dgps2-reco-body {
    padding: 10px;
}

.dgps2-reco-body strong {
    display: block;
    font-size: 13px;
    color: #0F172A;
    margin-bottom: 5px;
}

.dgps2-reco-body span {
    display: block;
    font-size: 11px;
    color: #64748B;
}

.dgps2-reco-body span i {
    width: 12px;
}

.dgps2-reco-price {
    color: #DC2626 !important;
    font-weight: 700;
    margin-top: 5px;
}

/* Success sidebar */
.dgps2-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 18px;
    /* Cap to the viewport so a tall summary still pins at the top instead of
       scrolling with the page; the column scrolls internally when it overflows. */
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.dgps2-side::-webkit-scrollbar {
    width: 6px;
}

.dgps2-side::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .32);
    border-radius: 999px;
}

.dgps2-confirmed {
    background: #fff;
    border: 1px solid #BBF7D0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.dgps2-confirmed i {
    color: #16A34A;
    font-size: 22px;
}

.dgps2-confirmed strong {
    display: block;
    color: #0F172A;
    font-size: 14px;
}

.dgps2-confirmed span {
    color: #64748B;
    font-size: 12px;
}

.dgps2-box {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
}

.dgps2-box h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #0F172A;
}

.dgps2-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    padding: 4px 0;
}

.dgps2-sum-row.is-green span:last-child {
    color: #16A34A;
}

.dgps2-sum-grand {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #E2E8F0;
    margin-top: 8px;
    padding-top: 10px;
}

.dgps2-sum-grand span {
    font-weight: 700;
    color: #0F172A;
}

.dgps2-sum-grand strong {
    color: #2563EB;
    font-size: 18px;
}

.dgps2-order-no {
    font-weight: 700;
    color: #0F172A;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.dgps2-order-no span {
    font-weight: 500;
    color: #94A3B8;
    font-size: 12px;
}

.dgps2-pay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
}

.dgps2-pay span {
    color: #94A3B8;
    font-size: 12px;
}

.dgps2-pay strong {
    color: #0F172A;
    font-size: 13px;
}

.dgps2-pay i {
    color: #2563EB;
    margin-right: 5px;
}

.dgps2-btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #2563EB;
    color: #2563EB;
    border-radius: 10px;
    padding: 10px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.dgps2-btn-block:hover {
    background: #EFF6FF;
}

.dgps2-points {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #FFFBEB;
    border-color: #FDE68A;
}

.dgps2-points i {
    color: #F59E0B;
    font-size: 20px;
}

.dgps2-points strong {
    display: block;
    color: #92400E;
    font-size: 14px;
}

.dgps2-points span {
    color: #B45309;
    font-size: 12px;
}

.dgps2-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dgps2-help strong {
    display: block;
    color: #0F172A;
    font-size: 14px;
}

.dgps2-help span {
    color: #64748B;
    font-size: 12px;
}

.dgps2-help .dgps2-btn-block {
    width: auto;
}

.dgps2-pass-card {
    background: #0B1220;
    color: #E5E7EB;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.dgps2-pass-l strong {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
}

.dgps2-pass-l span {
    color: #94A3B8;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.dgps2-pass-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563EB;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.dgps2-pass-card img {
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.dgps2-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 18px;
    margin-top: 22px;
}

.dgps2-trust>div {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dgps2-trust i {
    color: #2563EB;
    font-size: 18px;
    margin-top: 2px;
}

.dgps2-trust strong {
    display: block;
    color: #0F172A;
    font-size: 13px;
}

.dgps2-trust span {
    color: #64748B;
    font-size: 12px;
}

/* Success page — fidelity refinements to match reference */
.dgps2-secure-note {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
}

.dgps2-secure-note i {
    color: #16A34A;
    font-size: 15px;
}

.dgps2-secure-note strong {
    display: block;
    color: #166534;
    font-size: 12px;
}

.dgps2-secure-note span {
    color: #15803D;
    font-size: 11px;
}

/* Ticket card: poster + details grouped left, QR pinned right with a divider
   (keeps the reference look without a huge gap on the wide 1600px layout). */
.dgps2-ticket {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dgps2-ticket-media {
    flex: 0 0 240px;
}

.dgps2-ticket-media img {
    height: 170px;
}

.dgps2-ticket-info {
    flex: 1 1 auto;
    max-width: 560px;
}

.dgps2-ticket-qr {
    flex: 0 0 180px;
    margin-left: auto;
}

.dgps2-ticket-qr img {
    width: 130px;
    height: 130px;
}

/* ============ Checkout + Success — responsive (must stay LAST so media
   queries override the base layout rules above) ============ */
@media (max-width:1024px) {

    .dgco2-grid,
    .dgps2-grid {
        grid-template-columns: 1fr;
    }

    .dgco2-side,
    .dgps2-side {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .dgps2-reco-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:768px) {

    .dgco2,
    .dgps2 {
        padding: 16px 0 48px;
    }

    .dgco2-wrap,
    .dgps2-wrap {
        padding: 0 16px;
    }

    .dgco2-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dgco2-steps {
        display: none;
    }

    .dgco2-secure {
        width: 100%;
    }

    .dgco2-title h1 {
        font-size: 24px;
    }

    .dgco2-meta {
        gap: 10px 16px;
    }

    .dgco2-field2,
    .dgco2-addons {
        grid-template-columns: 1fr;
    }

    .dgps2-hero h1 {
        font-size: 26px;
    }

    .dgps2-ticket {
        flex-direction: column;
        align-items: stretch;
    }

    .dgps2-ticket-media,
    .dgps2-ticket-info,
    .dgps2-ticket-qr {
        flex: 1 1 auto;
        max-width: none;
    }

    .dgps2-ticket-media img {
        height: 200px;
    }

    .dgps2-ticket-qr {
        margin-left: 0;
        border-left: 0;
        border-top: 1px dashed #E2E8F0;
        padding: 14px 0 0;
        text-align: center;
    }

    .dgps2-two {
        grid-template-columns: 1fr;
    }

    .dgps2-reco-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dgps2-trust {
        grid-template-columns: 1fr 1fr;
    }

    .dgps2-email {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width:480px) {

    .dgps2-hero h1,
    .dgco2-title h1 {
        font-size: 22px;
    }

    .dgps2-trust {
        grid-template-columns: 1fr;
    }

    .dgps2-help {
        flex-direction: column;
        align-items: stretch;
    }

    .dgps2-help .dgps2-btn-block {
        width: 100%;
    }

    .dgps2-pass-card {
        flex-direction: column;
        text-align: center;
    }

    .dgps2-share {
        gap: 12px;
        justify-content: space-between;
    }

    .dgco2-promo {
        flex-direction: column;
        align-items: stretch;
    }

    .dgco2-promo-btn {
        width: 100%;
    }
}

/* =========================================================================
   Checkout v2 — reference-fidelity refinements (3-column layout, payment
   options, promo pill, member-benefit cards). Kept LAST so these rules win.
   ========================================================================= */

/* ----- 3-column grid ----- */
.dgco2-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 500px;
}

.dgco2-col {
    min-width: 0;
}

/* ----- Card elevation + input polish (reference fidelity) ----- */
.dgco2-card {
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

.dgco2-card input[type=text],
.dgco2-card input[type=email],
.dgco2-select {
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.dgco2-summary {
    box-shadow: 0 8px 24px rgba(11, 18, 32, .18);
}

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

.dgco2-title h1 {
    letter-spacing: -.01em;
}

.dgco2-col-a,
.dgco2-col-b {
    display: flex;
    flex-direction: column;
}

.dgco2-col-a .dgco2-card,
.dgco2-col-b .dgco2-card {
    margin-bottom: 18px;
}

.dgco2-col-a .dgco2-card:last-child,
.dgco2-col-b .dgco2-card:last-child {
    margin-bottom: 0;
}

/* ----- Breadcrumb ----- */
.dgco2-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94A3B8;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.dgco2-crumb a {
    color: #64748B;
    text-decoration: none;
}

.dgco2-crumb a:hover {
    color: #2563EB;
}

.dgco2-crumb i {
    font-size: 11px;
    color: #CBD5E1;
}

.dgco2-crumb span {
    color: #0F172A;
    font-weight: 600;
}

/* ----- Steps: vertical circle + label below, connector lines ----- */
.dgco2-steps {
    gap: 0;
    flex: 1;
    max-width: 560px;
    justify-content: center;
}

.dgco2-step {
    position: relative;
    flex: 1;
    min-width: 80px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
}

.dgco2-step::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #E2E8F0;
    z-index: 0;
}

.dgco2-step:last-child::after {
    display: none;
}

.dgco2-step b {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 2px solid #E2E8F0;
    background: #fff;
    color: #94A3B8;
}

.dgco2-step.is-active b {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}

.dgco2-step i {
    font-style: normal;
    margin-top: 7px;
    font-size: 12px;
}

/* ----- Secure badge with card icons ----- */
.dgco2-secure {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.dgco2-secure-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgco2-secure-cards {
    display: flex;
    gap: 7px;
    font-size: 22px;
    color: #94A3B8;
}

.dgco2-secure-cards .fa-cc-visa {
    color: #1A1F71;
}

.dgco2-secure-cards .fa-cc-mastercard {
    color: #EB001B;
}

.dgco2-secure-cards .fa-cc-amex {
    color: #2E77BC;
}

.dgco2-secure-cards .fa-cc-paypal {
    color: #003087;
}

.dgco2-secure-cards .fa-cc-apple-pay {
    color: #000;
}

/* ----- Meta row ----- */
.dgco2-meta {
    gap: 26px;
    align-items: flex-start;
}

.dgco2-meta-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.dgco2-meta-item>i {
    color: #2563EB;
    margin-top: 2px;
}

.dgco2-meta-item>div {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.dgco2-meta-sub {
    color: #2563EB;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}

.dgco2-meta-sub:hover {
    text-decoration: underline;
}

.dgco2-meta-sub2 {
    color: #94A3B8;
    font-size: 12px;
}

.dgco2-org-ava {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1E2A3F;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    flex: 0 0 auto;
    text-transform: uppercase;
}

img.dgco2-org-ava {
    border: 1px solid #E2E8F0;
}

/* ----- Section header extras ----- */
.dgco2-card h3 .dgco2-enhance {
    margin-left: auto;
    color: #7C3AED;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dgco2-check-org {
    margin: 14px 0 0;
}

/* ----- Tickets section: poster header + seating row ----- */
.dgco2-tk-head {
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 6px;
}

.dgco2-tk-head img {
    width: 96px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgco2-tk-head strong {
    display: block;
    color: #0F172A;
    font-size: 15px;
    margin-bottom: 4px;
}

.dgco2-tk-head span {
    display: block;
    color: #64748B;
    font-size: 12px;
}

.dgco2-tk-head span i {
    color: #2563EB;
    margin-right: 4px;
}

.dgco2-tk-info .dgco2-tk-unit {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin-top: 2px;
}

.dgco2-seating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
}

.dgco2-seating-lbl {
    display: block;
    color: #0F172A;
    font-size: 13px;
    font-weight: 600;
}

.dgco2-seating-lbl em {
    font-style: normal;
    color: #94A3B8;
    font-weight: 500;
}

.dgco2-seating-val {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin-top: 2px;
}

/* ----- Add-ons (3 across, checked highlight) ----- */
.dgco2-addons {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dgco2-addon {
    flex-direction: column;
}

.dgco2-addon.is-on {
    border-color: #2563EB;
    background: #F8FAFF;
}

/* ----- Promo applied pill ----- */
.dgco2-promo-applied {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-basis: 100%;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 10px 14px;
}

.dgco2-promo-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
}

.dgco2-promo-tick i {
    color: #16A34A;
    font-size: 15px;
}

.dgco2-promo-tick small {
    display: block;
    color: #15803D;
    font-weight: 500;
    font-size: 12px;
}

.dgco2-promo-applied #dgcoPromoRemove {
    margin-left: auto;
    background: none;
    border: 0;
    color: #2563EB;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.dgco2-promo-applied #dgcoPromoRemove:hover {
    text-decoration: underline;
}

/* ----- Payment options: radio left, label middle, visual right (one row) -----
   Scoped as `.dgco2-card label.dgco2-pay-opt` so it outranks the
   `.dgco2-card label { display:block }` rule (which must stay for field labels). */
.dgco2-card label.dgco2-pay-opt,
.dgco2-pay-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dgco2-card label.dgco2-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dgco2-pay-opt input[type=radio],
.dgco2-pay-opt input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.dgco2-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
    background: #fff;
}

.dgco2-pay-opt input:checked+.dgco2-radio {
    border-color: #2563EB;
}

.dgco2-pay-opt input:checked+.dgco2-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2563EB;
}

.dgco2-pay-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dgco2-pay-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0F172A;
    font-size: 14px;
}

.dgco2-pay-label small {
    color: #94A3B8;
    font-size: 12px;
    font-weight: 500;
}

.dgco2-pay-cards {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 7px;
    font-size: 24px;
    line-height: 1;
}

.dgco2-pay-cards .fa-cc-visa {
    color: #1A1F71;
}

.dgco2-pay-cards .fa-cc-mastercard {
    color: #EB001B;
}

.dgco2-pay-cards .fa-cc-amex {
    color: #2E77BC;
}

.dgco2-pay-cards .fa-cc-discover {
    color: #F58220;
}

.dgco2-pay-badge {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
}

.dgco2-pay-apple {
    background: #000;
    color: #fff;
}

.dgco2-pay-pp {
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #003087;
}

.dgco2-pay-pp i {
    color: #0070BA;
}

.dgco2-reco {
    background: #DCFCE7;
    color: #15803D;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.dgco2-pass-ic {
    flex: 0 0 auto;
    margin-left: auto;
    width: 46px;
    height: 32px;
    border-radius: 7px;
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dgco2-pay-note {
    color: #B45309;
    font-size: 12px;
    margin: 4px 0 0;
}

/* ----- Earn info box (blue) ----- */
.dgco2-earn-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 13px 15px;
}

.dgco2-earn-note>i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 auto;
}

.dgco2-earn-note strong {
    color: #1E3A8A;
}

.dgco2-earn-note span {
    display: block;
    color: #3B66C4;
    font-size: 12px;
    margin-top: 3px;
}

.dgco2-earn-note a {
    color: #2563EB;
    font-weight: 600;
}

/* ----- Billing selects + full-width helper ----- */
.dgco2-col-full {
    grid-column: 1/-1;
}

.dgco2-field3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.dgco2-select {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    color: #0F172A;
}

.dgco2-select:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ----- Summary tweaks ----- */
.dgco2-info {
    color: #64748B;
    font-size: 11px;
    margin-left: 3px;
}

/* ----- Member benefit box (blue, inside dark summary) ----- */
/* Member-benefit box: light/white card with a blue accent (reference image 2) */
.dgco2-pass-benefit {
    flex-direction: row;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #DBEAFE;
}

.dgco2-pass-benefit i {
    color: #2563EB;
    margin-top: 2px;
}

.dgco2-pass-benefit strong {
    color: #1E3A8A;
    margin-bottom: 3px;
}

.dgco2-pass-benefit span {
    color: #64748B;
    line-height: 1.45;
}

.dgco2-pass-benefit span b {
    color: #0F172A;
}

.dgco2-pass-join {
    display: inline-block;
    margin-top: 8px;
    color: #2563EB;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
}

.dgco2-pass-join:hover {
    text-decoration: underline;
}

/* ----- Why card: 2-col benefits + outline explore button ----- */
.dgco2-why ul {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.dgco2-why-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    background: transparent;
    color: #93C5FD;
    border: 1px solid rgba(96, 165, 250, .5);
    border-radius: 10px;
    padding: 11px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.dgco2-why-btn:hover {
    background: rgba(96, 165, 250, .12);
    color: #DBEAFE;
}

/* ----- Responsive (overrides the generic 1024 collapse above) ----- */
@media (max-width:1200px) {
    .dgco2-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .dgco2-side {
        grid-column: 1 / -1;
        position: static;
    }

    .dgco2-why ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:760px) {
    .dgco2-grid {
        grid-template-columns: 1fr;
    }

    .dgco2-secure {
        width: 100%;
    }

    .dgco2-field3 {
        grid-template-columns: 1fr;
    }

    .dgco2-why ul {
        grid-template-columns: 1fr;
    }

    .dgco2-tk-head img {
        width: 72px;
        height: 60px;
    }

    .dgco2-promo-applied {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   My Deko Go Pass — member wallet dashboard (.dgp-*). Static demo page.
   ========================================================================= */
.dgp {
    background: #F1F5F9;
    padding: 24px 0 60px;
    color: #0F172A;
}

.dgp-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.dgp-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94A3B8;
    margin-bottom: 16px;
}

.dgp-crumb a {
    color: #64748B;
    text-decoration: none;
}

.dgp-crumb a:hover {
    color: #2563EB;
}

.dgp-crumb i {
    font-size: 11px;
    color: #CBD5E1;
}

.dgp-crumb span {
    color: #0F172A;
    font-weight: 600;
}

/* ---- Header ---- */
.dgp-head {
    display: grid;
    grid-template-columns: 1fr 780px;
    gap: 32px;
    align-items: start;
    margin-bottom: 22px;
}

.dgp-brand {
    color: #2563EB;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dgp-head-title h1 {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0F172A;
    margin: 10px 0 8px;
}

.dgp-tagline {
    color: #2563EB;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 12px;
}

.dgp-desc {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 0 22px;
}

.dgp-head-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dgp-btn-dark,
.dgp-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-btn-dark {
    background: #0B1220;
    color: #fff;
    border: 1px solid #0B1220;
}

.dgp-btn-dark:hover {
    background: #1E293B;
    color: #fff;
}

.dgp-btn-light {
    background: #fff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
}

.dgp-btn-light:hover {
    background: #F8FAFC;
    color: #0F172A;
}

.dgp-btn-light i {
    color: #2563EB;
}

/* ---- VIP membership card (light) ---- */
.dgp-vip {
    background: #fff;
    color: #0F172A;
    border: 1px solid #EBEFF6;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.dgp-vip-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dgp-vip-id {
    display: flex;
    gap: 13px;
    align-items: center;
}

.dgp-vip-diamond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.dgp-vip-id strong {
    color: #0F172A;
    font-size: 17px;
    display: block;
}

.dgp-vip-id span {
    color: #64748B;
    font-size: 13px;
}

.dgp-vip-since {
    background: #EAF1FF;
    color: #2563EB;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.dgp-vip-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #EEF1F6;
}

.dgp-vip-plabel {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 10px;
}

.dgp-vip-pts {
    color: #0F172A;
    font-size: 30px;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.dgp-vip-pts small {
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
}

.dgp-vip-next {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin: 10px 0 8px;
}

.dgp-vip-bar {
    height: 7px;
    border-radius: 999px;
    background: #E5EAF2;
    overflow: hidden;
}

.dgp-vip-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #1D4ED8);
}

.dgp-vip-btn {
    display: inline-block;
    margin-top: 14px;
    background: #fff;
    border: 1px solid #CBD7EA;
    color: #2563EB;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-vip-btn:hover {
    background: #F4F8FF;
    color: #2563EB;
}

.dgp-vip-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.dgp-vip-perks li {
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgp-vip-perks li i {
    color: #64748B;
    width: 16px;
    text-align: center;
}

/* ---- Stat cards ---- */
.dgp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dgp-stat {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 13px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgp-stat-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.dgp-stat-ic.is-blue {
    background: #EFF6FF;
    color: #2563EB;
}

.dgp-stat-ic.is-violet {
    background: #F5F3FF;
    color: #7C3AED;
}

.dgp-stat-ic.is-amber {
    background: #FFFBEB;
    color: #F59E0B;
}

.dgp-stat-ic.is-green {
    background: #ECFDF5;
    color: #16A34A;
}

.dgp-stat-label {
    display: block;
    color: #64748B;
    font-size: 12px;
}

.dgp-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.dgp-stat-sub {
    display: block;
    color: #94A3B8;
    font-size: 11px;
}

.dgp-stat-sub.is-green {
    color: #16A34A;
    font-weight: 600;
}

/* ---- Tabs ---- */
.dgp-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 22px;
}

.dgp-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dgp-tab span {
    background: #E2E8F0;
    color: #475569;
    font-size: 11px;
    border-radius: 999px;
    padding: 1px 7px;
}

.dgp-tab.is-active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

.dgp-tab.is-active span {
    background: #DBEAFE;
    color: #1D4ED8;
}

/* ---- Body grid ---- */
.dgp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.dgp-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dgp-block {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgp-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dgp-block-head h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.dgp-block-head a {
    color: #2563EB;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-block-foot {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 9px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    color: #2563EB;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-block-foot:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgp-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ---- Featured ticket card ---- */
.dgp-ticket {
    display: grid;
    grid-template-columns: 230px 1fr 180px;
    gap: 18px;
    background: #0B1220;
    border-radius: 14px;
    padding: 16px;
    color: #E5E7EB;
}

.dgp-ticket-media {
    position: relative;
    border-radius: 11px;
    overflow: hidden;
}

.dgp-ticket-media img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
}

.dgp-badge {
    position: absolute;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
}

.dgp-badge.is-soon {
    top: 10px;
    background: #7C3AED;
}

.dgp-badge.is-hot {
    bottom: 10px;
    background: #DB2777;
}

.dgp-ticket-info {
    display: flex;
    flex-direction: column;
}

.dgp-ticket-tag {
    align-self: flex-start;
    background: rgba(59, 130, 246, .18);
    color: #93C5FD;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.dgp-ticket-info h3 {
    color: #fff;
    font-size: 20px;
    margin: 9px 0 12px;
}

.dgp-ticket-info ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 7px;
}

.dgp-ticket-info li {
    font-size: 13px;
    color: #CBD5E1;
}

.dgp-ticket-info li i {
    color: #60A5FA;
    width: 16px;
}

.dgp-ticket-people {
    font-size: 12px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.dgp-ava-stack {
    display: inline-flex;
}

.dgp-ava-stack i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #0B1220;
    background: linear-gradient(135deg, #64748B, #334155);
    margin-left: -7px;
}

.dgp-ava-stack i:first-child {
    margin-left: 0;
}

.dgp-btn-primary {
    margin-top: auto;
    align-self: flex-start;
    background: linear-gradient(90deg, #2563EB, #1D4ED8);
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.dgp-btn-primary:hover {
    filter: brightness(1.07);
    color: #fff;
}

.dgp-btn-primary.sm {
    padding: 8px 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dgp-ticket-qr {
    background: #fff;
    border-radius: 11px;
    padding: 12px;
    text-align: center;
    color: #0F172A;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dgp-qr-tag {
    font-size: 10px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dgp-qr-id {
    font-size: 12px;
    font-weight: 700;
}

.dgp-ticket-qr img {
    margin: 4px 0;
}

.dgp-qr-foot {
    font-size: 10px;
    color: #94A3B8;
}

/* ---- Quick actions ---- */
.dgp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 6px;
}

.dgp-actions a {
    flex: 1;
    min-width: 120px;
    text-align: center;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 9px;
}

.dgp-actions a i {
    color: #2563EB;
    font-size: 15px;
}

.dgp-actions a:hover {
    background: #F8FAFC;
}

/* ---- Generic rows ---- */
.dgp-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-row:last-of-type {
    border-bottom: 0;
}

.dgp-row img {
    width: 84px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgp-row-sm img {
    width: 64px;
    height: 48px;
}

.dgp-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dgp-row-body strong {
    font-size: 14px;
}

.dgp-row-body span {
    color: #64748B;
    font-size: 12px;
}

.dgp-row-body span i {
    color: #2563EB;
    width: 14px;
}

.dgp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

.dgp-pill.is-amber {
    background: #FFF7ED;
    color: #C2410C;
}

.dgp-pill.is-green {
    background: #16A34A;
    color: #fff;
}

.dgp-pill.is-green-soft {
    background: #DCFCE7;
    color: #15803D;
}

/* ---- Buttons ---- */
.dgp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #2563EB;
    color: #2563EB;
    background: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 auto;
}

.dgp-btn-outline:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgp-btn-outline.sm {
    padding: 7px 13px;
    font-size: 12px;
}

/* ---- Deals ---- */
.dgp-deal {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-deal:last-of-type {
    border-bottom: 0;
}

.dgp-deal img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.dgp-deal-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dgp-deal-body strong {
    font-size: 13px;
}

.dgp-deal-date {
    color: #64748B;
    font-size: 11px;
}

.dgp-deal-price {
    font-weight: 700;
    color: #0F172A;
    font-size: 14px;
}

.dgp-deal-price del {
    color: #94A3B8;
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
}

.dgp-deal-exp {
    text-align: right;
    flex: 0 0 auto;
}

.dgp-deal-exp span {
    display: block;
    color: #94A3B8;
    font-size: 10px;
}

.dgp-deal-exp strong {
    color: #DC2626;
    font-size: 12px;
}

/* ---- Certificates ---- */
.dgp-cert {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-cert:last-of-type {
    border-bottom: 0;
}

.dgp-cert-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 auto;
}

.dgp-cert-body {
    flex: 1;
    min-width: 0;
}

.dgp-cert-body strong {
    display: block;
    font-size: 13px;
}

.dgp-cert-body span {
    color: #94A3B8;
    font-size: 11px;
}

.dgp-cert-dl {
    color: #2563EB;
    font-size: 14px;
}

/* ---- Replay ---- */
.dgp-replay {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-replay img {
    width: 72px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}

.dgp-replay-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dgp-replay-body strong {
    font-size: 13px;
}

.dgp-replay-body span {
    font-size: 11px;
    color: #94A3B8;
}

.dgp-replay-bar {
    height: 5px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: hidden;
}

.dgp-replay-bar span {
    display: block;
    height: 100%;
    background: #2563EB;
}

.dgp-replay-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgp-replay-play:hover {
    background: #2563EB;
    color: #fff;
}

/* ---- Recommended ---- */
.dgp-reco {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dgp-reco-card {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow .15s;
}

.dgp-reco-card:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, .1);
}

.dgp-reco-img {
    position: relative;
}

.dgp-reco-img img {
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.dgp-reco-img i {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dgp-reco-body {
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dgp-reco-body strong {
    font-size: 13px;
}

.dgp-reco-body span {
    color: #64748B;
    font-size: 11px;
}

.dgp-reco-body span i {
    color: #2563EB;
    width: 12px;
}

.dgp-reco-price {
    color: #DC2626 !important;
    font-weight: 700;
    margin-top: 3px;
}

/* ---- Sidebar ---- */
.dgp-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.dgp-member {
    background: linear-gradient(135deg, #0B1220, #1E1B4B);
    border-radius: 16px;
    padding: 18px;
    color: #E5E7EB;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}

.dgp-member-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.dgp-member-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .2);
}

.dgp-member-head strong {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dgp-member-head span {
    color: #94A3B8;
    font-size: 12px;
}

.dgp-member-tier {
    color: #FBBF24;
    font-size: 12px;
    font-weight: 700;
}

.dgp-member-pts strong {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0;
}

.dgp-member-pts strong small {
    font-size: 12px;
    color: #94A3B8;
    font-weight: 600;
}

.dgp-member-note {
    display: block;
    color: #A5B4FC;
    font-size: 12px;
    margin-bottom: 9px;
}

.dgp-member-next {
    display: block;
    color: #94A3B8;
    font-size: 11px;
    margin-top: 7px;
}

.dgp-member-link {
    display: inline-block;
    margin-top: 10px;
    color: #93C5FD;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dgp-card-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.dgp-card-head a {
    color: #2563EB;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Notifications ---- */
.dgp-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-note-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
}

.dgp-note-ic.is-blue {
    background: #EFF6FF;
    color: #2563EB;
}

.dgp-note-ic.is-green {
    background: #ECFDF5;
    color: #16A34A;
}

.dgp-note-ic.is-amber {
    background: #FFFBEB;
    color: #F59E0B;
}

.dgp-note div {
    flex: 1;
    min-width: 0;
}

.dgp-note strong {
    display: block;
    font-size: 13px;
}

.dgp-note span {
    color: #64748B;
    font-size: 12px;
}

.dgp-note em {
    color: #94A3B8;
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

/* ---- Mini tabs ---- */
.dgp-minitabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 10px;
}

.dgp-minitabs button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.dgp-minitabs button span {
    background: #E2E8F0;
    color: #475569;
    font-size: 10px;
    border-radius: 999px;
    padding: 0 6px;
}

.dgp-minitabs button.is-active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

/* ---- Side deals ---- */
.dgp-sdeal {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgp-sdeal img {
    width: 52px;
    height: 52px;
    border-radius: 9px;
    object-fit: cover;
}

.dgp-sdeal-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dgp-sdeal-body strong {
    font-size: 13px;
}

.dgp-sdeal-body span {
    color: #64748B;
    font-size: 11px;
}

.dgp-sdeal-exp {
    color: #94A3B8 !important;
}

/* ---- Help ---- */
.dgp-help {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 13px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgp-help img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgp-help strong {
    display: block;
    font-size: 14px;
}

.dgp-help span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin-bottom: 8px;
}

/* ---- How it works ---- */
.dgp-steps {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.dgp-steps li {
    display: flex;
    gap: 12px;
}

.dgp-step-n {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgp-steps strong {
    display: block;
    font-size: 13px;
}

.dgp-steps span {
    color: #64748B;
    font-size: 12px;
}

/* ---- Trust footer ---- */
.dgp-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
}

.dgp-trust>div {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dgp-trust i {
    color: #2563EB;
    font-size: 18px;
    margin-top: 2px;
}

.dgp-trust strong {
    display: block;
    font-size: 13px;
}

.dgp-trust span {
    color: #64748B;
    font-size: 12px;
}

.dgp-trust-leaf {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #C7D6F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgp-trust-leaf i {
    color: #2563EB;
    font-size: 14px;
    margin-top: 0;
}

/* =========================================================================
   My Pass — redesigned dashboard (tabs / seminars / pass card / row2)
   ========================================================================= */
.dgp-tabs2 {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-bottom: 1px solid #E8ECF3;
    margin: 26px 0 22px;
    scrollbar-width: none;
}

.dgp-tabs2::-webkit-scrollbar {
    display: none;
}

.dgp-tab2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.dgp-tab2 i {
    font-size: 14px;
}

.dgp-tab2:hover {
    color: #2563EB;
}

.dgp-tab2.is-active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

/* Panels */
.dgp-panel {
    background: #fff;
    border: 1px solid #EBEFF6;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .03);
}

.dgp-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dgp-panel-head h2 {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.dgp-panel-head a {
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

/* Row 1 layout */
.dgp-row1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}

.dgp-row1>.dgp-panel {
    display: flex;
    flex-direction: column;
}

/* Seminar scroller — fixed-width cards, horizontal scroll with a peek */
.dgp-sem-wrap {
    position: relative;
    flex: 1;
}

.dgp-sem-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.dgp-sem-scroll::-webkit-scrollbar {
    display: none;
}

.dgp-sem {
    flex: 0 0 234px;
    border: 1px solid #EBEFF6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.dgp-sem-nav {
    position: absolute;
    top: 58px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E6EBF3;
    color: #1E293B;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity .15s, background .15s;
}

.dgp-sem-nav:hover {
    background: #F8FAFC;
}

.dgp-sem-prev {
    left: -16px;
}

.dgp-sem-next {
    right: -16px;
}

.dgp-sem-nav[hidden] {
    display: none;
}

.dgp-sem-media {
    position: relative;
    height: 116px;
}

.dgp-sem-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dgp-sem-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 4px 9px;
    border-radius: 7px;
    letter-spacing: .02em;
}

.dgp-sem-badge.is-blue {
    background: #2563EB;
}

.dgp-sem-badge.is-pink {
    background: #DB2777;
}

.dgp-sem-badge.is-green {
    background: #16A34A;
}

.dgp-sem-badge.is-violet {
    background: #7C3AED;
}

.dgp-sem-body {
    padding: 13px 13px 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dgp-sem-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 9px;
    line-height: 1.3;
}

.dgp-sem-body ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 6px;
    flex: 1;
}

.dgp-sem-body li {
    font-size: 12px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.dgp-sem-body li i {
    color: #94A3B8;
    width: 13px;
    text-align: center;
}

.dgp-sem-extra {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
}

.dgp-sem-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dgp-sem-btns .dgp-btn-primary.sm,
.dgp-sem-btns .dgp-btn-outline.sm {
    justify-content: center;
    padding: 9px 6px;
    font-size: 12px;
}

/* Upcoming Pass — dark QR card */
.dgp-pass {
    background: linear-gradient(150deg, #0B1A3A 0%, #0E2147 55%, #112A57 100%);
    color: #E5EAF3;
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.dgp-pass-badge {
    display: inline-block;
    background: #2563EB;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 11px;
    border-radius: 7px;
    margin-bottom: 14px;
}

.dgp-pass-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}

.dgp-pass-info {
    flex: 1;
    min-width: 0;
}

.dgp-pass-qr {
    background: #fff;
    border-radius: 10px;
    padding: 7px;
    line-height: 0;
    flex: 0 0 auto;
}

.dgp-pass h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.2;
}

.dgp-pass-meta {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.dgp-pass-meta li {
    font-size: 13px;
    color: #C5D1E6;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dgp-pass-meta li i {
    color: #7E97C4;
    width: 15px;
    text-align: center;
}

.dgp-pass-codes {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 16px;
}

.dgp-pass-codes span {
    display: block;
    font-size: 10px;
    letter-spacing: .06em;
    color: #8AA0C6;
    font-weight: 600;
    margin-bottom: 4px;
}

.dgp-pass-codes strong {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dgp-pass-codes strong i {
    color: #7E97C4;
    cursor: pointer;
    font-size: 12px;
}

.dgp-pass-codes-r {
    text-align: right;
}

.dgp-pass-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.dgp-pass-join,
.dgp-pass-ob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgp-pass-join {
    flex: 1.3;
    background: #2563EB;
    color: #fff;
}

.dgp-pass-join:hover {
    background: #1D4ED8;
    color: #fff;
}

.dgp-pass-ob {
    flex: 1;
    background: #fff;
    color: #0F172A;
}

.dgp-pass-ob:hover {
    background: #EFF3FA;
    color: #0F172A;
}

.dgp-pass-reminder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, .22);
    margin: 0 -22px -22px;
    padding: 13px 22px;
    font-size: 12.5px;
}

.dgp-pass-reminder span {
    color: #C5D1E6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dgp-pass-reminder span i {
    color: #7E97C4;
}

.dgp-pass-reminder a {
    color: #7FB0FF;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Row 2 layout — third column matches the pass card width (560px) so it lines
   up under it, and the two left panels align under the seminars panel */
.dgp-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 560px;
    gap: 22px;
    align-items: stretch;
}

/* Saved deals (row 2) */
.dgp-deal2 {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-top: 1px solid #F1F4F9;
}

.dgp-deal2:first-of-type {
    border-top: 0;
}

.dgp-deal2-media {
    position: relative;
    flex: 0 0 auto;
}

.dgp-deal2-media img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.dgp-deal2-off {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #16A34A;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}

.dgp-deal2-body {
    flex: 1;
    min-width: 0;
}

.dgp-deal2-body strong {
    display: block;
    font-size: 13.5px;
    color: #0F172A;
}

.dgp-deal2-when {
    display: block;
    font-size: 11.5px;
    color: #64748B;
    margin: 2px 0 4px;
}

.dgp-deal2-price {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.dgp-deal2-price del {
    color: #94A3B8;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.dgp-deal2-exp {
    text-align: center;
    flex: 0 0 auto;
}

.dgp-deal2-exp>span {
    font-size: 10px;
    color: #94A3B8;
    display: block;
    margin-bottom: 4px;
}

.dgp-cd {
    display: flex;
    gap: 6px;
}

.dgp-cd em {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.dgp-cd em small {
    font-size: 8px;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: .03em;
}

.dgp-deal2-save {
    color: #CBD5E1;
    font-size: 16px;
    flex: 0 0 auto;
}

.dgp-deal2-save:hover {
    color: #2563EB;
}

/* Updates & reminders */
.dgp-upd {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid #F1F4F9;
}

.dgp-upd:first-of-type {
    border-top: 0;
}

.dgp-upd-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.dgp-upd-ic.is-blue {
    background: #EAF1FF;
    color: #2563EB;
}

.dgp-upd-ic.is-violet {
    background: #F1ECFF;
    color: #7C3AED;
}

.dgp-upd-body {
    flex: 1;
    min-width: 0;
}

.dgp-upd-body strong {
    display: block;
    font-size: 13.5px;
    color: #0F172A;
}

.dgp-upd-body span {
    font-size: 12px;
    color: #64748B;
}

.dgp-upd-tag {
    font-size: 11px;
    font-weight: 600;
    color: #2563EB;
    background: #EAF1FF;
    padding: 3px 11px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.dgp-upd-foot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

/* How it works (horizontal steps) */
.dgp-how2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    position: relative;
}

.dgp-how2-step {
    text-align: left;
    position: relative;
}

/* dotted connector running between consecutive step circles */
.dgp-how2-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 42px;
    right: -8px;
    border-top: 2px dotted #B9CFF2;
    z-index: 0;
}

.dgp-how2-n {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #2563EB;
    color: #2563EB;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-bottom: 10px;
}

.dgp-how2-step strong {
    display: block;
    font-size: 13.5px;
    color: #0F172A;
    margin-bottom: 4px;
}

.dgp-how2-step span {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.5;
}

/* Specificity overrides — beat global `.dekogo-page a {color:inherit}` and `.dgvs h3` */
.dgp .dgp-btn-primary,
.dgp .dgp-btn-primary:hover {
    color: #fff;
}

.dgp .dgp-btn-outline {
    color: #2563EB;
}

.dgp .dgp-btn-outline:hover {
    color: #1D4ED8;
}

.dgp .dgp-btn-dark {
    color: #fff;
}

.dgp .dgp-btn-light {
    color: #0F172A;
}

.dgp .dgp-btn-light i {
    color: #2563EB;
}

.dgp .dgp-vip-btn {
    color: #2563EB;
}

.dgp .dgp-tab2 {
    color: #64748B;
}

.dgp .dgp-tab2.is-active {
    color: #2563EB;
}

.dgp .dgp-panel-head a {
    color: #2563EB;
}

.dgp .dgp-pass h3 {
    color: #fff;
}

.dgp .dgp-pass-join {
    color: #fff;
}

.dgp .dgp-pass-ob {
    color: #0F172A;
}

.dgp .dgp-pass-reminder a {
    color: #7FB0FF;
}

.dgp .dgp-upd-foot {
    color: #2563EB;
}

.dgp .dgp-deal2-save {
    color: #CBD5E1;
}

.dgp .dgp-deal2-save:hover {
    color: #2563EB;
}

/* ---- Tab panes ---- */
.dgp-pane {
    display: none;
}

.dgp-pane.is-active {
    display: block;
}

.dgp-pane:not(.is-active) {
    display: none !important;
}

/* Persistent pass card (full-width banner, shown on every tab) */
.dgp-pass-wide {
    margin-bottom: 22px;
}

.dgp-pass-wide .dgp-pass-main {
    align-items: center;
}

/* My Pass overview: deals + updates side by side */
.dgp-two2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
    margin-top: 22px;
}

/* Persistent how-it-works spacing */
.dgp-persist {
    margin-top: 22px;
}

@media (max-width: 760px) {
    .dgp-two2 {
        grid-template-columns: 1fr;
    }
}

.dgp-tab2-c {
    font-size: 11px;
    font-weight: 700;
    background: #EEF2F8;
    color: #64748B;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 2px;
}

.dgp-tab2.is-active .dgp-tab2-c {
    background: #EAF1FF;
    color: #2563EB;
}

/* Upcoming grid (pane) */
.dgp-sem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dgp-sem-grid .dgp-sem {
    flex: none;
}

/* "Browse more" tile that fills out a short seminar row */
.dgp-sem-cta {
    flex: 0 0 234px;
    border: 2px dashed #D7E0EE;
    border-radius: 14px;
    background: #FBFCFE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 20px;
    text-decoration: none;
    color: #2563EB;
    min-height: 240px;
}

.dgp-sem-grid .dgp-sem-cta {
    flex: none;
}

.dgp-sem-cta i {
    font-size: 30px;
}

.dgp-sem-cta strong {
    font-size: 14px;
    color: #0F172A;
}

.dgp-sem-cta span {
    font-size: 12px;
    color: #64748B;
}

.dgp-sem-cta:hover {
    background: #F4F8FF;
    border-color: #B9CFF2;
}

/* Completed / replay list rows */
.dgp-clist {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #F1F4F9;
}

.dgp-clist:first-of-type {
    border-top: 0;
}

.dgp-clist img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgp-clist-body {
    flex: 1;
    min-width: 0;
}

.dgp-clist-body strong {
    display: block;
    font-size: 14px;
    color: #0F172A;
}

.dgp-clist-body span {
    font-size: 12px;
    color: #64748B;
}

.dgp-clist-acts {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Completed seminars — card grid */
.dgp-ccard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.dgp-ccard {
    border: 1px solid #EBEFF6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.dgp-ccard-media {
    position: relative;
    height: 130px;
}

.dgp-ccard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dgp-ccard-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #16A34A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dgp-ccard-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dgp-ccard-body strong {
    font-size: 14.5px;
    color: #0F172A;
    line-height: 1.3;
}

.dgp-ccard-body>span {
    font-size: 12px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 14px;
}

.dgp-ccard-acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.dgp-ccard-acts .dgp-btn-outline.sm,
.dgp-ccard-acts .dgp-btn-primary.sm {
    justify-content: center;
    padding: 9px 6px;
    font-size: 12px;
}

/* Certificate grid */
.dgp-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dgp-certcard {
    border: 1px solid #EBEFF6;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dgp-certcard-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ECFDF5;
    color: #16A34A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 4px;
}

.dgp-certcard-ic.is-muted {
    background: #F1F5F9;
    color: #94A3B8;
}

/* Persisted-certificate state chip + multi-action row (My Certificates, 10.5) */
.dgp-cert-state {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 9px;
    border-radius: 999px;
}

.dgp-cert-state.is-pending {
    background: #FEF3C7;
    color: #B45309;
}

.dgp-cert-state.is-revoked,
.dgp-cert-state.is-expired {
    background: #FEF2F2;
    color: #B91C1C;
}

.dgp-cert-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.dgp-cert-actions .dgp-btn-outline.sm {
    cursor: pointer;
}

.dgp-certcard strong {
    font-size: 14px;
    color: #0F172A;
}

.dgp-certcard>span {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 8px;
}

/* Points pane */
.dgp-points {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
}

.dgp-points-big {
    background: #F8FAFF;
    border: 1px solid #EBEFF6;
    border-radius: 14px;
    padding: 22px;
}

.dgp-points-big strong {
    display: block;
    font-size: 34px;
    font-weight: 800;
    color: #0F172A;
    margin: 6px 0;
}

.dgp-points-big strong small {
    font-size: 14px;
    color: #94A3B8;
}

.dgp-points-tier {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #475569;
}

.dgp-points-perks {
    gap: 14px;
}

/* Panel subtitle */
.dgp-panel-sub {
    display: block;
    font-size: 12.5px;
    color: #64748B;
    margin-top: 3px;
    font-weight: 400;
}

/* Settings pane */
.dgp-settings {
    display: grid;
    gap: 6px;
}

.dgp-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #F1F4F9;
    cursor: pointer;
}

.dgp-set-row:first-child {
    border-top: 0;
}

.dgp-set-row>span:first-child {
    display: flex;
    flex-direction: column;
}

.dgp-set-row strong {
    font-size: 14px;
    color: #0F172A;
}

.dgp-set-row small {
    font-size: 12px;
    color: #64748B;
}

/* Toggle switch */
.dgp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
}

.dgp-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.dgp-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #CBD5E1;
    transition: background .18s;
    pointer-events: none;
}

.dgp-switch i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .18s;
}

.dgp-switch input:checked+i {
    background: #2563EB;
}

.dgp-switch input:checked+i::after {
    transform: translateX(18px);
}

/* Empty states */
.dgp-empty {
    text-align: center;
    padding: 48px 20px;
    color: #64748B;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dgp-empty i {
    font-size: 34px;
    color: #CBD5E1;
}

.dgp-empty p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 700px) {
    .dgp-points {
        grid-template-columns: 1fr;
    }

    .dgp-clist {
        flex-wrap: wrap;
    }

    .dgp-clist-acts {
        width: 100%;
    }
}

/* ============ Responsive — redesigned My Pass ============ */

/* Laptops / tablets: keep the hero in one row, but make both columns flexible
   so the wide VIP card shrinks instead of stacking */
@media (max-width: 1200px) {
    .dgp-head {
        grid-template-columns: 1.05fr 1fr;
        gap: 26px;
    }
}

/* Tablets landscape: pass card drops below seminars; row2 stays a 3-up row */
@media (max-width: 1100px) {
    .dgp-row1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .dgp-row2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dgp-pass h3 {
        max-width: 100%;
    }

    /* steps go 2×2 in the narrower column; drop the horizontal connector */
    .dgp-how2 {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-how2-step:not(:last-child)::after {
        display: none;
    }
}

/* Smaller tablets — stack row2, restore the full-width 4-step row */
@media (max-width: 900px) {
    .dgp-row2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .dgp-how2 {
        grid-template-columns: repeat(4, 1fr);
    }

    .dgp-how2-step:not(:last-child)::after {
        display: block;
    }

    /* VIP card is narrow now — stack its points/perks */
    .dgp-vip-body {
        grid-template-columns: 1fr;
    }
}

/* Phones landscape / large phones — now stack the hero */
@media (max-width: 768px) {
    .dgp-head {
        grid-template-columns: 1fr;
    }

    .dgp-head-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .dgp-head-btns a {
        justify-content: center;
    }

    .dgp-vip-body {
        grid-template-columns: 1fr;
    }

    .dgp-vip-top {
        flex-wrap: wrap;
    }

    .dgp-trust {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-sem {
        flex: 0 0 230px;
    }

    .dgp-pass-codes {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* Phones */
@media (max-width: 560px) {
    .dgp-tab2 {
        padding: 11px 10px;
        font-size: 13px;
    }

    .dgp-sem {
        flex: 0 0 78%;
    }

    .dgp-sem-prev {
        left: -6px;
    }

    .dgp-sem-next {
        right: -6px;
    }

    .dgp-pass {
        padding: 18px;
    }

    .dgp-pass h3 {
        font-size: 19px;
    }

    .dgp-pass-main {
        gap: 12px;
    }

    .dgp-pass-qr img {
        width: 96px;
        height: 96px;
    }

    .dgp-pass-btns {
        flex-wrap: wrap;
    }

    .dgp-pass-join {
        flex: 1 1 100%;
    }

    .dgp-pass-reminder {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dgp-how2 {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-how2-step:not(:last-child)::after {
        display: none;
    }

    .dgp-deal2 {
        flex-wrap: wrap;
        row-gap: 6px;
        position: relative;
    }

    .dgp-deal2-off {
        top: 5px;
        left: 5px;
    }

    .dgp-deal2-body {
        flex: 1 1 calc(100% - 94px);
        padding-right: 24px;
    }

    .dgp-deal2-exp {
        flex: 1 1 100%;
        margin-left: 94px;
        text-align: left;
    }

    .dgp-deal2-exp>span {
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px 0 0;
    }

    .dgp-cd {
        display: inline-flex;
        vertical-align: middle;
    }

    .dgp-deal2-save {
        position: absolute;
        top: 12px;
        right: 0;
    }

    .dgp-trust {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .dgp-head-title h1 {
        font-size: 30px;
    }

    .dgp-sem {
        flex: 0 0 86%;
    }

    .dgp-how2 {
        grid-template-columns: 1fr;
    }

    .dgp-vip-since {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* ---- Responsive ---- */
@media (max-width:1100px) {

    /* .dgp-head handled by the redesigned responsive rules above (stays one row) */
    .dgp-grid {
        grid-template-columns: 1fr;
    }

    .dgp-side {
        position: static;
    }

    .dgp-stats {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-reco {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:720px) {
    .dgp-wrap {
        padding: 0 16px;
    }

    .dgp-head-title h1 {
        font-size: 26px;
    }

    .dgp-vip-body {
        grid-template-columns: 1fr;
    }

    .dgp-stats {
        grid-template-columns: 1fr;
    }

    .dgp-two {
        grid-template-columns: 1fr;
    }

    .dgp-ticket {
        grid-template-columns: 1fr;
    }

    .dgp-ticket-media img {
        min-height: 170px;
    }

    .dgp-reco {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-trust {
        grid-template-columns: 1fr 1fr;
    }

    .dgp-actions a {
        min-width: 90px;
    }
}

/* =========================================================================
   Deko Go — Virtual Seminars (.dgvs- listing/detail, .dgvl- live, .dgvr- replay)
   STATIC demo pages.
   ========================================================================= */
.dgvs {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fefefe00;
    padding: 0 0 56px;
    color: #0F172A;
}

.dgvs-wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

.dgvs-dark {
    background: #0A0F1C;
    color: #E5E7EB;
}

.dgvs-brand {
    color: #2563EB;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dgvs-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94A3B8;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dgvs-crumb a {
    color: #64748B;
    text-decoration: none;
}

.dgvs-crumb a:hover {
    color: #2563EB;
}

.dgvs-crumb i {
    font-size: 11px;
    color: #CBD5E1;
}

.dgvs-crumb span {
    color: #0F172A;
    font-weight: 600;
}

.dgvs-crumb-dark a,
.dgvs-crumb-dark span {
    color: #94A3B8;
}

.dgvs-crumb-dark span {
    color: #E5E7EB;
}

/* Buttons */
.dgvs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, #2563EB, #1D4ED8);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.dgvs-btn-primary:hover {
    filter: brightness(1.07);
    color: #fff;
}

.dgvs-btn-primary.block {
    width: 100%;
}

.dgvs-btn-primary.lg {
    padding: 13px 24px;
    font-size: 15px;
}

.dgvs-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #BFD3FF;
    color: #1D4ED8;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.dgvs-btn-ghost:hover {
    background: #EFF6FF;
}

.dgvs-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #2563EB;
    color: #2563EB;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.dgvs-btn-outline:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgvs-btn-outline.sm {
    padding: 7px 13px;
    font-size: 12px;
}

.dgvs-btn-outline.block {
    width: 100%;
    margin-top: 8px;
}

.dgvs-btn-outline.dark {
    background: transparent;
    border-color: rgba(148, 163, 184, .4);
    color: #E5E7EB;
}

.dgvs-btn-outline.dark:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.dgvs-link {
    color: #2563EB;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgvs-link:hover {
    text-decoration: underline;
}

/* Hero */
.dgvs-hero {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 30px;
    align-items: center;
    margin-bottom: 24px;
}

.dgvs-hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin: 10px 0 6px;
    letter-spacing: -.01em;
}

.dgvs-hero-lead {
    color: #2563EB;
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 10px;
}

.dgvs-hero-sub {
    color: #64748B;
    font-size: 14px;
    max-width: 520px;
    margin: 0 0 18px;
}

.dgvs-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dgvs-hero-r {
    position: relative;
}

.dgvs-hero-r img {
    width: 100%;
    object-fit: cover;
}

.dgvs-hero-badge {
    position: absolute;
    top: -14px;
    right: -6px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #1D4ED8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    line-height: 1.2;
}

/* Filters */
/* ===== Catalogue search + dropdown filter bar ===== */
.dgvs-searchbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.dgvs-search {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
}

.dgvs-search>.fa-search {
    position: absolute;
    left: 14px;
    color: #94A3B8;
    font-size: 14px;
    pointer-events: none;
}

.dgvs-search input {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 38px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--dg-text);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-search input:focus {
    outline: none;
    border-color: var(--dg-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgvs-search-clear {
    position: absolute;
    right: 10px;
    border: 0;
    background: #F1F5F9;
    color: #64748B;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.dgvs-search-clear:hover {
    background: #E2E8F0;
    color: var(--dg-text);
}

.dgvs-dd {
    position: relative;
    display: flex;
    align-items: center;
}

.dgvs-dd>.fa {
    position: absolute;
    left: 14px;
    color: #94A3B8;
    font-size: 13px;
    pointer-events: none;
}

.dgvs-select {
    height: 44px;
    padding: 0 34px 0 34px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px;
    font-weight: 600;
    color: var(--dg-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-select:focus {
    outline: none;
    border-color: var(--dg-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgvs-reset {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-reset:hover {
    background: #F8FAFC;
    color: var(--dg-red);
    border-color: #FCA5A5;
}

@media (max-width: 640px) {

    .dgvs-dd,
    .dgvs-search {
        flex: 1 1 100%;
    }

    .dgvs-select {
        width: 100%;
    }

    .dgvs-reset {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.dgvs-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 22px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-filter {
    background: none;
    border: 0;
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dgvs-filter:hover {
    background: #F1F5F9;
}

.dgvs-filter.is-active {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgvs-filter .dgvs-live-dot {
    color: #16A34A;
    font-size: 8px;
}

/* AJAX filter grid loading state */
.dgvs-cards-wrap {
    position: relative;
}

.dgvs-cards.is-loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .15s ease;
}

.dgvs-cards-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2563EB;
    font-weight: 600;
    font-size: 14px;
}

/* Grid */
.dgvs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
}

.dgvs-detail-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.dgvs-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.dgvs-block {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dgvs-block-head h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.dgvs-block-head a {
    color: #2563EB;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dgvs-h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px;
}

.dgvs-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Live featured */
.dgvs-live-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dgvs-live-label {
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dgvs-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15);
}

.dgvs-live-flag {
    color: #EF4444;
    font-size: 11px;
    font-weight: 700;
}

.dgvs-live {
    display: grid;
    grid-template-columns: 360px 1fr 180px;
    gap: 20px;
    align-items: start;
}

.dgvs-live-cta {
    align-self: center;
}

.dgvs-live-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.dgvs-live-media img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.dgvs-live-tags {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.dgvs-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: .02em;
}

.dgvs-live-attend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.dgvs-live-attend i {
    color: #64748B;
}

.dgvs-live-watch {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(15, 23, 42, .75);
    color: #fff;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
}

.dgvs-live-body h3 {
    font-size: 22px;
    margin: 0 0 8px;
}

.dgvs-live-body p {
    color: #64748B;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dgvs-live-host {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.dgvs-live-host img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.dgvs-live-host strong {
    display: block;
    font-size: 14px;
}

.dgvs-live-host span {
    color: #94A3B8;
    font-size: 13px;
}

.dgvs-live-meta {
    display: flex;
    gap: 16px;
    color: #64748B;
    font-size: 14px;
}

.dgvs-live-meta i {
    color: #2563EB;
    margin-right: 4px;
}

.dgvs-live-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cards grid */
.dgvs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(231px, 1fr));
    gap: 16px;
}

.dgvs-card {
    border: 1px solid #E2E8F0;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s;
}

.dgvs-card:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, .1);
}

.dgvs-card-media {
    position: relative;
    display: block;
}

.dgvs-card-media img {
    width: 100%;
    height: 104px;
    object-fit: cover;
    display: block;
}

.dgvs-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 4px 10px;
    border-radius: 7px;
    color: #fff;
}

.dgvs-tag.is-blue {
    background: #2563EB;
}

.dgvs-tag.is-violet {
    background: #7C3AED;
}

.dgvs-tag.is-green {
    background: #16A34A;
}

.dgvs-tag.is-amber {
    background: #D97706;
}

.dgvs-tag.is-red {
    background: #DC2626;
}

.dgvs-tag.is-slate {
    background: #64748B;
}

.dgvs-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.dgvs-card-body strong {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.dgvs-card-body>span {
    color: #64748B;
    font-size: 13px;
}

.dgvs-card-body>span i {
    color: #2563EB;
    width: 15px;
}

.dgvs-card-foot {
    margin: 7px 0 5px;
}

.dgvs-card-price {
    font-weight: 800;
    font-size: 17px;
    color: #0F172A;
}

.dgvs-btn-primary.block {
    margin-top: auto;
}

/* Sidebar boxes */
.dgvs-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.dgvs-card-box {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgvs-card-box h4 {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
}

.dgvs-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dgvs-card-head h4 {
    margin: 0;
}

.dgvs-card-head a {
    color: #2563EB;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.dgvs-why {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 18px;
}

.dgvs-why li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dgvs-why-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 auto;
}

.dgvs-why-ic svg {
    width: 21px;
    height: 21px;
}

.dgvs-why strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.dgvs-why span {
    font-size: 13px;
    line-height: 1.45;
}

.dgvs-host {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgvs-host:last-child {
    border-bottom: 0;
}

.dgvs-host img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.dgvs-host-body {
    flex: 1;
    min-width: 0;
}

.dgvs-host-body strong {
    display: block;
    font-size: 13px;
}

.dgvs-host-body span {
    color: #94A3B8;
    font-size: 11px;
}

/* Band + trust */
.dgvs-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
    margin-top: 22px;
}

.dgvs-band-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dgvs-band-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.dgvs-band-item strong {
    display: block;
    font-size: 15px;
    margin-bottom: 3px;
}

.dgvs-band-item>div>span {
    display: block;
    color: #64748B;
    font-size: 13px;
    margin-bottom: 6px;
}

.dgvs-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background-color: #EFF6FF;
    border-radius: 16px;
    padding: 24px;
    margin-top: 32px;
    align-items: center;
}

.dgvs-trust-item {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* vertical divider between trust columns (matches reference) */
.dgvs-trust-item+.dgvs-trust-item {
    border-left: 1px solid #CBD9F2;
    padding-left: 24px;
}

.dgvs-trust-ic {
    background: transparent;
    color: #2563EB;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dgvs-trust-ic i {
    font-size: 30px;
    line-height: 1;
    display: block;
    color: #2563EB;
}

.dgvs-trust-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dgvs-trust-item strong {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
}

.dgvs-trust-item span {
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.4;
}

/* ---- Detail page ---- */
/* ---- Breadcrumb refinements ---- */
.dgvs-crumb-sep {
    color: #CBD5E1;
    font-size: 11px;
}

.dgvs-crumb a {
    color: #64748B;
    text-decoration: none;
    transition: color 0.15s;
    font-weight: 500;
}

.dgvs-crumb a:hover {
    color: #2563EB;
}

.dgvs-crumb>span {
    color: #0F172A;
    font-weight: 600;
}

.dgvs-crumb i.fa-home {
    font-size: 13px;
}

/* ---- Hero panel: two-column layout ---- */
.dgvs-hero-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

.dgvs-hero-l {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dgvs-hero-r {
    min-width: 0;
}

.dgvs-hero-r .dgvs-detail-media {
    margin-bottom: 0;
    border-radius: 16px;
}

.dgvs-hero-r .dgvs-detail-media img {
    height: 360px;
    border-radius: 16px;
}

/* ---- Detail title ---- */
.dgvs-detail-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    color: #0F172A;
    margin: 10px 0 14px;
    letter-spacing: -0.02em;
}

.dgvs-detail-sub {
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 680px;
}

.dgvs-detail-host {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #475569;
    margin-bottom: 18px;
}

.dgvs-detail-host img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.dgvs-detail-host span {
    color: #64748B;
}

.dgvs-detail-host strong {
    color: #0F172A;
    font-weight: 600;
}

.dgvs-detail-flags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.dgvs-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.dgvs-flag.flag-certificate {
    background-color: #ECFDF5;
    color: #047857;
    border-color: #D1FAE5;
}

.dgvs-flag.flag-certificate i {
    color: #10B981;
}

.dgvs-flag.flag-replay {
    background-color: #EFF6FF;
    color: #1D4ED8;
    border-color: #DBEAFE;
}

.dgvs-flag.flag-replay i {
    color: #3B82F6;
}

.dgvs-flag.flag-attending {
    background-color: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}

.dgvs-flag.flag-attending i {
    color: #64748B;
}

.dgvs-detail-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #E2E8F0;
}

.dgvs-detail-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.dgvs-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #1E3A8A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.dgvs-play:hover {
    background: #ffffff;
    transform: translate(-50%, -50%) scale(1.08);
    color: #1D4ED8;
}

.dgvs-play i {
    margin-left: 4px;
}

/* Locked state: content requires registration first. */
.dgvs-play-locked {
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
}

.dgvs-play-locked:hover {
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
}

.dgvs-play-locked i {
    margin-left: 0;
    font-size: 22px;
}

.dgvs-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dgvs-facts>div {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* vertical divider between fact columns (matches reference) */
.dgvs-facts>div+div {
    border-left: 1px solid #E2E8F0;
    padding-left: 20px;
}

.dgvs-fact-ic {
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    flex: 0 0 auto;
}

.dgvs-fact-ic i {
    display: block;
    line-height: 1;
    font-size: 28px;
    color: #2563EB;
}

.dgvs-facts strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
}

.dgvs-facts span {
    color: #64748B;
    font-size: 12px;
    line-height: 1.4;
}

.dgvs-learn-section {
    margin-top: 0;
    margin-bottom: 0;
}

.dgvs-learn-section .dgvs-h2 {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 16px;
}

.dgvs-learn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* A lone trailing card (e.g. a 5th "certificate" takeaway) spans the full row. */
.dgvs-learn-card:last-child:nth-child(4n + 1) {
    grid-column: 1 / -1;
}

.dgvs-learn-card {
    border: 1px solid #DCFCE7;
    border-radius: 16px;
    padding: 20px;
    background: #F0FDF4;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dgvs-learn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(22, 163, 74, 0.10);
}

.dgvs-learn-card .dgvs-learn-ic {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #16A34A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 14px;
}

.dgvs-learn-ic i {
    display: block;
    line-height: 1;
    font-size: 26px;
    color: #16A34A;
}

/* Solid green heading badge for the "What You'll Learn" section (green theme) */
.dgvs-learn-section .dgvs-h2-ic {
    background: #16A34A;
    color: #fff;
    border-radius: 50%;
}

.dgvs-learn-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
    line-height: 1.3;
}

.dgvs-learn-card span {
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
    display: block;
}

.dgvs-agenda-container {
    position: relative;
    margin-top: 8px;
}

.dgvs-agenda {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dgvs-agenda::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 91px;
    width: 2px;
    background-color: #E2E8F0;
}

.dgvs-agenda li {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    align-items: flex-start;
}

.dgvs-agenda li:last-child {
    margin-bottom: 0;
}

.dgvs-agenda-time {
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 70px;
    text-align: right;
    padding-top: 1px;
}

.dgvs-agenda-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2.5px solid #2563EB;
    box-shadow: none;
    flex: 0 0 auto;
    margin-top: 5px;
    position: relative;
    z-index: 2;
}

.dgvs-agenda-content {
    flex: 1;
    min-width: 0;
}

.dgvs-agenda-content strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
    line-height: 1.3;
}

.dgvs-agenda-content span {
    color: #64748B;
    font-size: 13px;
    line-height: 1.45;
    display: block;
}

/* Hosts & speakers: compact cards, one per row, no wasted whitespace. */
.dgvs-fhost-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.dgvs-fhost {
    display: flex;
    gap: 16px;
    align-items: center;
    text-align: left;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 16px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.dgvs-fhost:hover {
    border-color: #DBE3EE;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.dgvs-fhost-left {
    flex: 0 0 auto;
}

.dgvs-fhost-left img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.dgvs-fhost-right {
    flex: 1;
    min-width: 0;
}

.dgvs-fhost-right h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 3px 0;
}

.dgvs-fhost-role {
    color: #2563EB;
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 0;
}

.dgvs-fhost-right p {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0 0 0;
}

.dgvs-fhost-right .dgvs-fhost-tags {
    margin-top: 12px;
}

.dgvs-fhost-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.dgvs-fhost-tags li {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgvs-check-ic {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex: 0 0 auto;
}

/* Access tiers */
.dgvs-when {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgvs-when i {
    color: #2563EB;
}

.dgvs-when-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #E2E8F0;
    display: grid;
    gap: 12px;
}

.dgvs-when-list li {
    font-size: 14px;
    color: #334155;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgvs-when-list i {
    color: #64748B;
    font-size: 16px;
    width: 18px;
    display: inline-flex;
    justify-content: center;
}

.dgvs-cal-link {
    color: #2563EB;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dgvs-cal-link i {
    color: #2563EB;
}

.dgvs-cal-link .arrow {
    transition: transform 0.2s;
}

.dgvs-cal-link:hover .arrow {
    transform: translateX(4px);
}

.dgvs-access {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.dgvs-access-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    position: relative;
    background: #ffffff;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.dgvs-access-opt:hover {
    border-color: #CBD5E1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.dgvs-access-opt.is-selected {
    border-color: #2563EB;
    background: #F8FAFF;
    box-shadow: 0 0 0 1px #2563EB;
}

.dgvs-access-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dgvs-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.dgvs-access-opt input:checked+.dgvs-radio {
    border-color: #2563EB;
}

.dgvs-access-opt input:checked+.dgvs-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #2563EB;
}

.dgvs-access-body {
    flex: 1;
    min-width: 0;
}

.dgvs-access-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.dgvs-access-badge {
    background: #DCFCE7;
    color: #15803D;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    font-style: normal;
}

.dgvs-access-desc {
    display: block;
    color: #64748B;
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.4;
}

.dgvs-access-price {
    font-weight: 800;
    font-size: 16px;
    color: #0F172A;
    flex: 0 0 auto;
}

.dgvs-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563EB;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin: 8px 0 16px;
}

.dgvs-promo-link i {
    font-size: 15px;
}

.dgvs-promo-link .arrow {
    transition: transform 0.2s;
}

.dgvs-promo-link:hover .arrow {
    transform: translateX(4px);
}

/* Promo code reveal row */
.dgvs-promo-row {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.dgvs-promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 14px;
    color: #0F172A;
}

.dgvs-promo-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgvs-promo-row .dgvs-btn-outline.sm {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dgvs-promo-status {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
}

.dgvs-promo-status.is-ok {
    color: #047857;
}

.dgvs-promo-status.is-err {
    color: #DC2626;
}

/* Empty access state */
.dgvs-access-empty {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #F1F5F9;
    border-radius: 10px;
    color: #475569;
    font-size: 13px;
}

/* "You're registered" confirmation panel (shown instead of checkout). */
.dgvs-registered {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 14px;
    padding: 14px 16px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
}

.dgvs-registered-ic {
    color: #16A34A;
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
    margin-top: 1px;
}

.dgvs-registered strong {
    display: block;
    color: #065F46;
    font-size: 15px;
    margin-bottom: 2px;
}

.dgvs-registered span {
    color: #047857;
    font-size: 13px;
    line-height: 1.5;
}

/* Saved-state for the Save Seminar button */
.dgvs-save.is-saved {
    border-color: #2563EB;
    color: #2563EB;
    background: #EFF6FF;
}

/* Agenda/host row with no agenda → host spans full width */
.dgvs-two-single {
    grid-template-columns: 1fr;
}

.dgvs-secure {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #F1F5F9;
}

.dgvs-secure i {
    color: #64748B;
    font-size: 18px;
}

.dgvs-secure strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
}

.dgvs-secure span {
    color: #64748B;
    font-size: 12px;
}

.dgvs-cards-row {
    display: flex;
    gap: 8px;
    font-size: 24px;
    margin-top: 16px;
    justify-content: center;
}

.brand-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-visa {
    color: #1A1F71;
}

.card-mastercard {
    color: #EB001B;
}

.card-amex {
    color: #017ECE;
}

.card-paypal {
    color: #003087;
}

.card-apple-pay {
    color: #000000;
}


/* ======================= LIVE ROOM (.dgvl-) ======================= */
.dgvl-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dgvl-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dgvl-title h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 6px 0 0;
    color: #fff;
}

.dgvl-liveflag {
    color: #fff;
    background: #EF4444;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.dgvl-attending {
    color: #94A3B8;
    font-size: 12px;
}

.dgvl-meta {
    color: #94A3B8;
    font-size: 12px;
    margin: 6px 0 0;
}

.dgvl-top-r {
    display: flex;
    gap: 10px;
}

.dgvl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.dgvl-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dgvl-speakers {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dgvl-speaker {
    display: flex;
    gap: 9px;
    align-items: center;
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 11px;
    padding: 8px 12px;
}

.dgvl-speaker img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.dgvl-speaker strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
}

.dgvl-speaker span {
    color: #94A3B8;
    font-size: 11px;
}

.dgvl-spk-tag {
    background: #2563EB;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    font-style: normal;
}

.dgvl-speaker-more {
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 11px;
    padding: 8px 14px;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.dgvl-speaker-more small {
    font-size: 10px;
    font-weight: 500;
}

.dgvl-video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0B1220;
    min-height: 380px;
}

/* Inline player: media fills the box, poster + overlays hide once playing. */
.dgvl-video>video,
.dgvl-video>iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    background: #000;
    z-index: 5;
}

.dgvl-video.is-playing>img,
.dgvl-video.is-playing .dgvl-video-cap,
.dgvl-video.is-playing .dgvl-video-bar,
.dgvl-video.is-playing .dgvs-play {
    display: none;
}

/* Control-bar buttons (icons are real buttons now). */
.dgvl-video-bar button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 2px 4px;
}

.dgvl-video-bar button:hover {
    color: #fff;
}

.dgvl-video>img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    opacity: .55;
    position: absolute;
    inset: 0;
}

.dgvl-video-brand {
    position: absolute;
    top: 14px;
    left: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.dgvl-video-live {
    position: absolute;
    top: 14px;
    right: 16px;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    z-index: 2;
}

.dgvl-video-cap {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.dgvl-video-cap h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    margin: 0;
}

.dgvl-video-cap h2 span {
    color: #60A5FA;
}

.dgvl-video-cap p {
    color: #CBD5E1;
    margin: 8px 0 0;
}

.dgvl-video-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.dgvl-video-bar span {
    font-size: 11px;
    color: #FCA5A5;
}

.dgvl-spacer {
    flex: 1;
}

.dgvl-watch {
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
}

.dgvl-watch-h {
    color: #CBD5E1;
    font-size: 13px;
    margin: 0 0 12px;
}

.dgvl-watch-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.dgvl-watch-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1F2937;
    border: 1px solid #374151;
    color: #E5E7EB;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.dgvl-watch-zoom:hover {
    background: #374151;
    color: #fff;
}

.dgvl-watch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Both element types. These four have always been <button>s in the markup —
   the rule only ever named `a`, so they fell through to the reset further down,
   which strips background and border and sets no colour. On a #111827 panel
   that left four items in the page's default near-black text: present, clickable
   and invisible. */
.dgvl-watch-actions a,
.dgvl-watch-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0B1220;
    border: 1px solid #1F2937;
    color: #CBD5E1;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.dgvl-watch-actions a:hover,
.dgvl-watch-actions button:hover {
    border-color: #2563EB;
    background: #16213A;
    color: #fff;
}

.dgvl-watch-actions a:focus-visible,
.dgvl-watch-actions button:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.dgvl-strip {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 16px;
    padding: 16px;
}

.dgvl-strip-next {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dgvl-strip-next img {
    width: 54px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
}

.dgvl-pill {
    background: #2563EB;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    align-self: flex-start;
}

.dgvl-strip-next strong,
.dgvl-strip-item strong {
    display: block;
    color: #fff;
    font-size: 13px;
}

/* The DESCRIPTION line, not every span in the card.
   `.dgvl-strip-ic` is a <span> too, and `.dgvl-strip-item span` (0,1,1) beats
   `.dgvl-strip-ic` (0,1,0) whatever the order — so the icon tile was taking
   this rule's `display:block` (killing the flex centring), its 11px (shrinking
   the glyph) and its grey (over the blue), which is why those two tiles read as
   empty boxes with something faint in the corner. */
.dgvl-strip-next span:not(.dgvl-strip-ic):not(.dgvl-pill),
.dgvl-strip-item span:not(.dgvl-strip-ic):not(.dgvl-pill) {
    color: #94A3B8;
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
}

.dgvl-strip-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dgvl-strip-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(37, 99, 235, .2);
    color: #60A5FA;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgvl-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 18px;
}

.dgvl-chat {
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: 520px;
}

.dgvl-chat-tabs {
    display: flex;
    border-bottom: 1px solid #1F2937;
}

.dgvl-chat-tabs button {
    flex: 1;
    background: none;
    border: 0;
    padding: 13px;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 2px solid transparent;
}

.dgvl-chat-tabs button span {
    background: #2563EB;
    color: #fff;
    font-size: 10px;
    border-radius: 999px;
    padding: 1px 7px;
}

.dgvl-chat-tabs button.is-active {
    color: #fff;
    border-bottom-color: #2563EB;
}

.dgvl-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dgvl-msg {
    display: flex;
    gap: 10px;
}

.dgvl-msg img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgvl-msg-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dgvl-msg-top strong {
    color: #E5E7EB;
    font-size: 12px;
}

.dgvl-msg-top small {
    color: #64748B;
    font-size: 10px;
}

.dgvl-host-tag {
    background: #7C3AED;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    font-style: normal;
}

.dgvl-msg p {
    color: #CBD5E1;
    font-size: 13px;
    margin: 3px 0;
}

.dgvl-msg-like {
    color: #64748B;
    font-size: 11px;
}

.dgvl-msg.is-host p {
    color: #DDD6FE;
}

.dgvl-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #1F2937;
}

.dgvl-chat-input input {
    flex: 1;
    background: #0B1220;
    border: 1px solid #1F2937;
    border-radius: 9px;
    padding: 9px 12px;
    color: #E5E7EB;
    font-size: 13px;
}

.dgvl-chat-input button {
    background: #2563EB;
    border: 0;
    border-radius: 9px;
    width: 40px;
    color: #fff;
    cursor: pointer;
}

.dgvl-tools {
    background: #111827;
    border: 1px solid #1F2937;
    border-radius: 16px;
    padding: 16px;
}

.dgvl-tools h4 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 15px;
}

.dgvl-tool {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #1F2937;
    text-decoration: none;
}

.dgvl-tool:last-child {
    border-bottom: 0;
}

.dgvl-tool>div {
    flex: 1;
    min-width: 0;
}

.dgvl-tool-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(37, 99, 235, .2);
    color: #60A5FA;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgvl-tool strong {
    display: block;
    color: #E5E7EB;
    font-size: 13px;
}

/* Same exclusion as the strip above: `.dgvl-tool-ic` is a <span>, and without
   this it was drawing its glyph in the caption's grey at 11px instead of the
   tile's own blue. */
.dgvl-tool span:not(.dgvl-tool-ic) {
    color: #94A3B8;
    font-size: 11px;
}

.dgvl-tool>i {
    color: #64748B;
}

/* ============ Live room — functional additions ============ */

/* Buttons reused as tools / actions get a clean reset. */
/* `.dgvl-watch-actions button` used to be in this reset. It is styled as a chip
   above instead — stripping its background and border here is what made the row
   disappear. */
button.dgvl-tool,
button.dgvl-speaker-more,
.dgvl-msg-like {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

button.dgvl-speaker-more {
    width: auto;
}

.dgvl-tool.is-disabled {
    opacity: .55;
    cursor: default;
}

.dgvl-msg-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748B;
    font-size: 11px;
    padding: 2px 0;
    transition: color .15s ease;
}

.dgvl-msg-like:hover {
    color: #60A5FA;
}

.dgvl-msg.is-mine>div {
    /* subtle highlight for your own messages */
}

.dgvl-msg.is-mine .dgvl-msg-top strong {
    color: #93C5FD;
}

.dgvl-empty {
    color: #64748B;
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
}

.dgvl-input-hint {
    color: #FCA5A5;
    font-size: 12px;
    padding: 0 12px 10px;
    margin: 0;
}

/* ---- Modals ---- */
.dgvl-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(2px);
}

.dgvl-modal[hidden] {
    display: none;
}

.dgvl-modal-box {
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #0F172A;
    border: 1px solid #1F2937;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.dgvl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #1F2937;
}

.dgvl-modal-head h3 {
    margin: 0;
    font-size: 16px;
    color: #F1F5F9;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dgvl-modal-head h3 i {
    color: #60A5FA;
}

.dgvl-modal-x {
    background: none;
    border: 0;
    color: #94A3B8;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.dgvl-modal-x:hover {
    color: #fff;
}

.dgvl-modal-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
}

.dgvl-agenda-row {
    display: flex;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #1F2937;
}

.dgvl-agenda-row:last-child {
    border-bottom: 0;
}

.dgvl-agenda-time {
    flex: 0 0 84px;
    color: #60A5FA;
    font-weight: 700;
    font-size: 13px;
}

.dgvl-agenda-row strong {
    display: block;
    color: #E5E7EB;
    font-size: 14px;
}

.dgvl-agenda-row span {
    color: #94A3B8;
    font-size: 12px;
}

.dgvl-mat-row,
.dgvl-spk-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid #1F2937;
    text-decoration: none;
}

.dgvl-mat-row:last-child,
.dgvl-spk-row:last-child {
    border-bottom: 0;
}

.dgvl-mat-row>div,
.dgvl-spk-row>div {
    flex: 1;
    min-width: 0;
}

.dgvl-mat-row strong,
.dgvl-spk-row strong {
    display: block;
    color: #E5E7EB;
    font-size: 14px;
}

.dgvl-mat-row span,
.dgvl-spk-row span {
    color: #94A3B8;
    font-size: 12px;
}

.dgvl-mat-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .2);
    color: #60A5FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgvl-mat-row>i {
    color: #60A5FA;
}

.dgvl-spk-row img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* ======================= REPLAY (.dgvr-) ======================= */
.dgvr-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* attend card sits centred against the title block */
    gap: 18px 28px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    background: linear-gradient(115deg, #EAF1FF 0%, #F6F9FF 52%, #EEF6FF 100%);
    border: 1px solid #E3EBFA;
    border-radius: 20px;
    padding: 26px 30px;
}

/* Eyebrow brand label above the title */
.dgvr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563EB;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dgvr-head h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}

.dgvr-sub {
    color: #2563EB;
    font-weight: 700;
    font-size: 19px;
    margin: 6px 0 8px;
}

.dgvr-lead {
    color: #64748B;
    font-size: 14px;
    margin: 0 0 14px;
    max-width: 640px;
}

.dgvr-completed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16A34A;
    background: #ECFDF5;
    border: 1px solid #C7F0DA;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 12px;
}

/* Back button + Completed badge share one aligned row */
.dgvr-head-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Right-side info: two side-by-side groups (attended-on + rate) */
/* Title block takes the slack so the attend block hugs the right as a tight pair */
.dgvr-head-l {
    flex: 1 1 auto;
    min-width: 0;
}

.dgvr-attend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    background: #FFFFFF;
    border: 1px solid #E3EBFA;
    border-radius: 14px;
    padding: 16px 22px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .07);
}

.dgvr-attend-item>span {
    display: block;
    color: #94A3B8;
    font-size: 12px;
}

.dgvr-attend-item strong {
    display: block;
    font-size: 13px;
    margin-top: 4px;
    color: #0F172A;
    white-space: nowrap;
}

.dgvr-attend-item strong i {
    color: #2563EB;
    margin-right: 5px;
}

.dgvr-rate .dgvr-stars {
    margin-top: 5px;
}

.dgvr-rate i {
    color: #3B82F6 !important;
    font-size: 16px;
    margin-right: 3px;
    cursor: pointer;
}

.dgvr-grid {
    grid-template-columns: minmax(0, 1fr) 600px;
}

/* Keep the caption on the left half so it doesn't run under the centre play button */
.dgvr-video .dgvl-video-cap {
    max-width: 52%;
}

/* Video caption must stay white + readable over the (light) photo thumbnail,
   beating the site theme's global dark <h2> colour. */
.dgvr-video .dgvl-video-cap h2 {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

.dgvr-video .dgvl-video-cap h2 span {
    color: #93C5FD !important;
}

.dgvr-video .dgvl-video-cap p {
    color: #F1F5F9 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .65);
}

/* Inline player: the embedded iframe/video fills the whole box */
.dgvr-video iframe,
.dgvr-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 6;
    background: #000;
}

/* Play button is a real <button> now — strip its native chrome + show pointer */
.dgvs-play {
    border: 0;
    cursor: pointer;
    padding: 0;
}

.dgvr-video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0B1220;
    min-height: 360px;
    margin-bottom: 16px;
}

.dgvr-video>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}

.dgvr-video .dgvl-video-cap {
    left: 40px;
}

.dgvr-video-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.dgvr-video-bar span {
    font-size: 12px;
}

/* Once the real player is in, drop the poster overlays. */
.dgvr-video.is-playing>img,
.dgvr-video.is-playing .dgvl-video-cap,
.dgvr-video.is-playing .dgvr-video-bar,
.dgvr-video.is-playing .dgvs-play {
    display: none;
}

/* Q&A tab count + list (real questions from the live session). */
.dgvr-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: #E0E7FF;
    color: #4338CA;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.dgvr-qa {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.dgvr-qa-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #EEF2F7;
}

.dgvr-qa-item:last-child {
    border-bottom: 0;
}

.dgvr-qa-item>img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.dgvr-qa-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #0F172A;
}

.dgvr-qa-top small {
    color: #94A3B8;
    font-weight: 500;
}

.dgvr-qa-host {
    background: #EDE9FE;
    color: #6D28D9;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
}

.dgvr-qa-item p {
    margin: 3px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.dgvr-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dgvr-tabs button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.dgvr-tabs button.is-active {
    color: #2563EB;
    border-bottom-color: #2563EB;
}

/* Tab panels: only the active one is shown */
.dgvr-panel {
    display: none;
}

.dgvr-panel.is-active {
    display: block;
}

.dgvr-card-pane {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
}

.dgvr-card-pane h3 {
    font-size: 16px;
    margin: 0 0 12px;
}

.dgvr-hl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 560px) {
    .dgvr-hl {
        grid-template-columns: 1fr;
    }
}

.dgvr-hl li {
    display: flex;
    gap: 13px;
    align-items: center;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    padding: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dgvr-hl li:hover {
    border-color: #BFD3FF;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}

.dgvr-hl-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}

/* Force the glyph white + sized on the <i> itself (beats global icon colour) */
.dgvr-hl-ic i {
    color: #fff !important;
    font-size: 18px;
    line-height: 1;
}

.dgvr-hl div strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dgvr-hl div span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.5;
}

.dgvr-chapters {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dgvr-chapters li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 10px;
    border-radius: 10px;
    transition: background .15s ease;
}

.dgvr-chapters li:not(:last-child) {
    border-bottom: 1px solid #F1F5F9;
}

.dgvr-chapters li:hover {
    background: #F8FAFC;
}

.dgvr-ch-time {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    color: #1D4ED8;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 66px;
    text-align: center;
}

.dgvr-chapters strong {
    display: block;
    font-size: 13px;
    color: #0F172A;
    margin-bottom: 2px;
}

.dgvr-chapters span {
    color: #64748B;
    font-size: 12px;
    line-height: 1.45;
}

.dgvr-empty {
    color: #94A3B8;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.dgvr-notes {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.dgvr-notes:focus {
    outline: none;
    border-color: #2563EB;
}

.dgvr-notes-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 12px;
}

.dgvr-about {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
}

.dgvr-about h3 {
    font-size: 16px;
    margin: 0 0 8px;
}

.dgvr-about-l p {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 16px;
}

.dgvr-hostline {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dgvr-hostline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.dgvr-hostline span {
    color: #94A3B8;
    font-size: 11px;
    display: block;
}

.dgvr-hostline strong {
    font-size: 13px;
}

.dgvr-hostline .dgvs-btn-outline {
    margin-left: auto;
}

.dgvr-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.dgvr-facts li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 9px;
}

.dgvr-facts span {
    color: #94A3B8;
}

.dgvr-access-head {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 10px;
}

.dgvr-access-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}

.dgvr-access-ic.is-violet {
    background: #F5F3FF;
    color: #7C3AED;
}

/* Filled blue circle (Replay Access) — white glyph */
.dgvr-access-ic.is-fill {
    background: #2563EB;
    color: #fff;
    border-radius: 50%;
}

/* Count badge sits at the far right of a head row */
.dgvr-access-head .dgvr-count {
    margin-left: auto;
}

.dgvr-access-head strong {
    display: block;
    font-size: 14px;
}

.dgvr-access-head span {
    font-size: 12px;
    color: #64748B;
}

/* Replay Access: icon at top-left, title + note + buttons in an indented body column */
.dgvr-access-row {
    align-items: flex-start;
    margin-bottom: 0;
}

.dgvr-access-row .dgvr-access-ic {
    align-self: flex-start;
}

.dgvr-access-body {
    flex: 1;
    min-width: 0;
}

.dgvr-access-titlerow {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dgvr-access-row strong {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
}

/* Note now lives inside the body column → indented under the title */
.dgvr-access-row .dgvr-access-note {
    margin: 4px 0 0;
}

/* "Completed" green pill badge */
.dgvr-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ECFDF5;
    color: #16A34A !important;
    font-weight: 600;
    font-size: 12px;
    border-radius: 999px;
    padding: 3px 10px;
}

.dgvr-access-note {
    color: #64748B;
    font-size: 12px;
    margin: 0 0 12px;
}

/* Replay Access: two buttons share a row, but wrap to a stack when too narrow
   (so the long "Add to Watch Later" label never overflows). */
.dgvr-access-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}

.dgvr-access-btns>a {
    flex: 1 1 150px;
    /* both fit side-by-side when there's room, else each goes full-width */
    justify-content: center;
    padding: 11px 14px;
    /* same on both so heights + text align */
    font-size: 13.5px;
}

.dgvr-count {
    background: #EFF6FF;
    color: #2563EB;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
}

.dgvr-mini {
    color: #94A3B8;
    font-size: 12px;
    margin: 0 0 10px;
}

.dgvr-mat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #F1F5F9;
    text-decoration: none;
    color: #0F172A;
}

.dgvr-mat:last-child {
    border-bottom: 0;
}

.dgvr-mat-ic {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgvr-mat strong {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
}

.dgvr-mat-size {
    color: #94A3B8;
    font-size: 11px;
}

.dgvr-mat>i {
    color: #2563EB;
}

.dgvr-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dgvr-cert {
    text-align: left;
}

/* Title + status badge on one row */
.dgvr-cert-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.dgvr-cert-head strong {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.dgvr-badge {
    background: #ECFDF5;
    color: #16A34A;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.4;
}

.dgvr-cert strong {
    display: block;
    font-size: 14px;
}

.dgvr-cert>span {
    color: #64748B;
    font-size: 12px;
    display: block;
    margin: 0 0 12px;
}

.dgvr-related {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.dgvr-rel {
    text-decoration: none;
    color: #0F172A;
}

.dgvr-rel-img {
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 5px;
}

.dgvr-rel-img img {
    width: 100%;
    height: 60px;
    object-fit: cover;
}

.dgvr-rel-img i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.dgvr-rel strong {
    display: block;
    font-size: 11px;
    line-height: 1.3;
}

.dgvr-rel span {
    color: #94A3B8;
    font-size: 10px;
}

/* Meta row: "Replay" left, clock + duration right */
.dgvr-rel-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.dgvr-rel-len i {
    margin-right: 3px;
}

/* ---- Responsive ---- */
@media (max-width:1100px) {

    .dgvs-grid,
    .dgvs-detail-grid,
    .dgvl-grid,
    .dgvr-grid {
        grid-template-columns: 1fr;
    }

    .dgvs-side,
    .dgvl-side {
        position: static;
    }

    .dgvs-learn {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Below the 4-col layout, let the last card flow normally. */
    .dgvs-learn-card:last-child:nth-child(4n + 1) {
        grid-column: auto;
    }

    .dgvs-facts {
        grid-template-columns: 1fr 1fr;
    }

    .dgvs-hero-panel {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dgvl-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width:720px) {
    .dgvs-wrap {
        padding: 0 16px;
    }

    .dgvs-hero h1 {
        font-size: 30px;
    }

    .dgvs-live,
    .dgvs-two,
    .dgvs-band,
    .dgvr-about,
    .dgvr-two {
        grid-template-columns: 1fr;
    }

    .dgvs-learn {
        grid-template-columns: 1fr 1fr;
    }

    .dgvs-facts {
        grid-template-columns: 1fr;
    }

    .dgvl-top {
        flex-direction: column;
    }

    .dgvl-video-cap h2 {
        font-size: 24px;
    }

    .dgvr-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .dgvr-attend {
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }
}

/* =========================================================================
   Virtual Seminars — UI polish + full responsive pass (kept LAST so it wins).
   ========================================================================= */
.dgvs,
.dgvs *,
.dgvs *::before,
.dgvs *::after {
    box-sizing: border-box;
}

.dgvs img {
    max-width: 100%;
}

.dgvs-wrap,
.dgvs>.dekogo-container {
    overflow-x: clip;
}

/* Headings stay dark — the global theme colours <h2> green, so pin them here. */
.dgvs h1,
.dgvs h2,
.dgvs h3,
.dgvs h4 {
    color: #0F172A;
}

.dgvs-block-head h2 {
    color: #0F172A;
}

/* The live room is dark — the pin above turned its title, video caption,
   tool and modal headings (and the crumb's current page) dark-on-dark. */
.dgvs-dark .dgvl-title h1,
.dgvs-dark .dgvl-video-cap h2,
.dgvs-dark .dgvl-tools h4 {
    color: #fff;
}

.dgvs-dark .dgvl-modal-head h3 {
    color: #F1F5F9;
}

.dgvs-dark .dgvs-crumb>span {
    color: #E5E7EB;
}

/* Text links stay brand-blue — beat the global theme's <a> colour. */
.dgvs-link,
.dgvs-link:link,
.dgvs-link:visited,
.dgvs-link:hover,
.dgvs-link:focus {
    color: #2563EB !important;
}

/* Premium hero panel */
.dgvs-hero {
    background: linear-gradient(115deg, #EAF1FF 0%, #F6F9FF 52%, #EEF6FF 100%);
    border: 1px solid #E3EBFA;
    border-radius: 22px;
    padding: 34px;
    padding-top: 0;
    margin-bottom: 24px;
}

.dgvs-hero h1 {
    font-size: clamp(28px, 4.4vw, 44px);
    line-height: 1.08;
}

.dgvs-hero-r img {
    box-shadow: none;
}

.dgvs-hero-badge {
    box-shadow: 0 10px 24px rgba(29, 78, 216, .35);
}

.dgvs-btn-primary,
.dgvs-btn-ghost,
.dgvs-btn-outline {
    transition: filter .15s, background .15s, box-shadow .15s, transform .05s;
}

/* Prevent the global theme's tight line-height from clipping button text */
.dgvs-btn-primary,
.dgvs-btn-ghost,
.dgvs-btn-outline {
    line-height: 1.4;
    white-space: nowrap;
}

/* Force white text + icons on every filled (primary) button, beating global <a> colours */
.dgvs-btn-primary,
.dgvs-btn-primary:link,
.dgvs-btn-primary:visited,
.dgvs-btn-primary:hover,
.dgvs-btn-primary:focus,
.dgvs-btn-primary:active,
.dgvs-btn-primary i,
.dgvs-btn-primary span,
.dgvs-btn-primary * {
    color: #fff !important;
}

.dgvs-btn-primary:active,
.dgvs-btn-ghost:active,
.dgvs-btn-outline:active {
    transform: translateY(1px);
}

/* Responsive headings */
.dgvs-detail-title {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.18;
    margin: 6px 0 10px;
}

.dgvr-head h1 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
}

.dgvl-title h1 {
    font-size: clamp(20px, 3vw, 24px);
}

.dgvl-video-cap h2,
.dgvr-video .dgvl-video-cap h2 {
    font-size: clamp(22px, 3.6vw, 34px);
}

/* ---- ≤1200: tighten wide grids ---- */
@media (max-width:1200px) {

    .dgvs-detail-grid,
    .dgvr-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .dgvs-learn {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- ≤1024: single column, stacked sidebars ---- */
@media (max-width:1024px) {

    .dgvs-grid,
    .dgvs-detail-grid,
    .dgvl-grid,
    .dgvr-grid {
        grid-template-columns: 1fr;
    }

    .dgvs-side,
    .dgvl-side {
        position: static;
    }

    .dgvs-live {
        grid-template-columns: 240px 1fr;
    }

    .dgvs-live-cta {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .dgvs-live-cta a {
        flex: 1;
    }

    .dgvl-strip {
        grid-template-columns: 1fr;
    }

    .dgvl-chat {
        height: 440px;
    }

    .dgvr-related {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* sidebars become comfortable full-width cards */
    .dgvs-side,
    .dgvl-side {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dgvs-side>*,
    .dgvl-side>* {
        flex: 1 1 320px;
    }
}

/* ---- ≤768: tablet / large phone ---- */
@media (max-width:768px) {
    .dgvs {
        padding: 0 0 44px;
    }

    .dgvs-wrap {
        padding: 0 16px;
    }

    .dgvs-hero {
        padding: 22px;
    }

    .dgvs-hero-btns {
        flex-direction: column;
    }

    .dgvs-hero-btns a {
        width: 100%;
        justify-content: center;
    }

    /* filter + replay tabs scroll horizontally instead of wrapping */
    .dgvs-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dgvs-filter {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .dgvr-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .dgvr-tabs button {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .dgvs-live,
    .dgvs-two,
    .dgvs-band,
    .dgvr-about,
    .dgvr-two,
    .dgvr-related {
        grid-template-columns: 1fr;
    }

    .dgvs-learn {
        grid-template-columns: 1fr 1fr;
    }

    .dgvs-facts {
        grid-template-columns: 1fr 1fr;
    }

    .dgvs-detail-media img {
        height: 240px;
    }

    .dgvs-side,
    .dgvl-side {
        flex-direction: column;
    }

    .dgvs-side>*,
    .dgvl-side>* {
        flex: 1 1 auto;
    }

    .dgvl-top {
        flex-direction: column;
        align-items: stretch;
    }

    .dgvl-top-r {
        width: 100%;
    }

    .dgvl-top-r a {
        flex: 1;
    }

    .dgvl-video,
    .dgvr-video {
        min-height: 260px;
    }

    .dgvl-video>img,
    .dgvr-video>img {
        min-height: 260px;
    }

    .dgvl-watch-btns {
        flex-direction: column;
    }

    .dgvl-watch-btns a {
        width: 100%;
        justify-content: center;
    }
}

/* ---- ≤600: phones ---- */
@media (max-width:600px) {

    .dgvs-facts,
    .dgvs-learn {
        grid-template-columns: 1fr;
    }

    .dgvs-cards {
        grid-template-columns: 1fr 1fr;
    }

    .dgvs-live-cta {
        flex-direction: column;
    }

    .dgvl-speakers {
        gap: 8px;
    }

    .dgvl-video-cap {
        left: 18px;
        right: 18px;
    }

    .dgvr-head {
        flex-direction: column;
        padding: 20px 18px;
    }

    .dgvr-attend {
        text-align: left;
        gap: 18px 28px;
    }

    .dgvr-attend-item strong {
        white-space: normal;
    }

    /* Tab panes + cards: tighter padding on phones */
    .dgvr-card-pane {
        padding: 16px;
    }

    .dgvr-chapters li {
        padding: 11px 4px;
    }

    .dgvr-ch-time {
        min-width: 58px;
        padding: 5px 8px;
    }

    /* Video caption: give the text more room and shrink it on small screens */
    .dgvr-video .dgvl-video-cap {
        max-width: 78%;
    }

    .dgvr-video .dgvl-video-cap h2 {
        font-size: 20px;
    }

    .dgvr-video .dgvl-video-cap p {
        font-size: 12px;
    }

    .dgvr-video-bar {
        gap: 10px;
        padding: 10px 12px;
    }

    .dgvs-trust {
        gap: 14px 22px;
    }
}

/* ---- ≤420: small phones ---- */
@media (max-width:420px) {
    .dgvs-cards {
        grid-template-columns: 1fr;
    }

    .dgvs-detail-media img {
        height: 190px;
    }

    .dgvs-hero-badge {
        width: 70px;
        height: 70px;
        font-size: 10px;
        top: -8px;
        right: -2px;
    }
}

/* ---- Replay: keep the video (left) and sidebar (right) on one row down to 860px ---- */
@media (min-width: 1201px) {
    .dgvr-grid {
        grid-template-columns: minmax(0, 1fr) 600px;
    }
}

@media (min-width: 861px) and (max-width: 1200px) {
    .dgvr-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    /* keep the sidebar a vertical card stack inside the narrower column */
    .dgvr-grid .dgvs-side {
        flex-direction: column;
        flex-wrap: nowrap;
        position: sticky;
        top: 18px;
    }

    .dgvr-grid .dgvs-side>* {
        flex: 0 0 auto;
    }
}

@media (max-width: 860px) {
    .dgvr-grid {
        grid-template-columns: 1fr;
    }

    /* stacked sidebar is full-width → related stays a 3-up thumbnail grid */
    .dgvr-related {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Related: drop to 2-up then 1-up on small phones so thumbnails aren't cramped */
@media (max-width: 560px) {
    .dgvr-related {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .dgvr-related {
        grid-template-columns: 1fr;
    }
}

/* ---- Virtual Seminars: extra polish to match reference ---- */
/* Filter bar: spread tabs evenly across the full width on desktop */
@media (min-width:769px) {
    .dgvs-filters {
        justify-content: space-between;
        gap: 4px;
        padding: 6px 10px;
    }

    .dgvs-filter {
        padding: 9px 12px;
    }
}

/* Live pulse on the red dots */
@keyframes dgvsPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .45);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.dgvs-dot {
    animation: dgvsPulse 1.8s infinite;
}

.dgvs-live-pill::before,
.dgvl-video-live::before {
    content: '';
}

.dgvs-filter .dgvs-live-dot {
    animation: dgvsPulse 1.8s infinite;
    border-radius: 50%;
}

/* Active filter gets a soft pill so the current tab reads clearly */
.dgvs-filter.is-active {
    box-shadow: inset 0 0 0 1px #DBEAFE;
}

/* Live featured card: lift + crisper divider from the section */
.dgvs-live {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Full-width Live Now band: card surface + taller media */
.dgvs-live-featured {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px 22px;
}

.dgvs-live-media img {
    height: 210px;
}

/* Card media slightly taller for a more premium feel */
.dgvs-card-media img {
    height: 140px;
}

.dgvs-card-body strong {
    min-height: 42px;
}

/* Seminars grid: no outer box — cards sit on the page directly */
#seminars.dgvs-block {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ---- All Seminars (catalogue) page ---- */
/* Breadcrumb: just vertical breathing room so it isn't glued under the navbar */
.dgvs-crumb-cat {
    margin: 20px 0;
    font-size: 14.5px;
}

.dgvs-crumb-cat span {
    color: #2563EB;
}

.dgvs-crumb-cat a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.dgvs-crumb-cat a i.fa-home {
    font-size: 12px;
}

.dgvs-crumb-cat .dgvs-crumb-sep {
    color: #CBD5E1;
}

.dgvs-allhead {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 30px 32px;
    border-radius: 18px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    /* Seminar-themed photo, veiled by a left→right gradient so the text stays crisp */
    background:
        linear-gradient(100deg, #EAF1FF 0%, #EAF1FF 30%, rgba(234, 241, 255, .80) 50%, rgba(234, 241, 255, .35) 78%, rgba(234, 241, 255, .20) 100%),
        url('/DekoWebAsset/images/dekogo/seminars-banner.jpg') right center / cover no-repeat;
}

.dgvs-allhead>* {
    position: relative;
    z-index: 1;
}

.dgvs-allhead .dgvs-brand {
    background: #fff;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.dgvs-allhead h1 {
    font-size: 33px;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 12px 0 8px;
}

.dgvs-allhead .dgvs-hero-lead {
    color: #475569;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    max-width: 560px;
}

.dgvs-allhead .dgvs-btn-outline {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #fff;
}

.dgvs-allcount {
    color: #64748B;
    font-size: 14px;
    font-weight: 600;
}

.dgvs-datebar {
    margin-bottom: 16px;
}

/* Catalogue pagination */
#dgvsResults.is-loading {
    opacity: .55;
    transition: opacity .15s;
    pointer-events: none;
}

.dgvs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
}

.dgvs-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #0F172A;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
}

.dgvs-page-btn:hover:not(:disabled):not(.is-active) {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.dgvs-page-btn.is-active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}

.dgvs-page-btn:disabled {
    opacity: .45;
    cursor: default;
}

.dgvs-page-nav i {
    font-size: 12px;
}

.dgvs-page-gap {
    padding: 0 4px;
    color: #94A3B8;
    font-weight: 700;
}

/* Catalogue grid: as many cards per row as fit, wrapping onto multiple rows */
.dgvs-cards-all {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* ---- Catalogue page responsive ---- */
/* Date bar: below 1024 the week tabs + scrolling day strip can't share one row
   (the day strip collapses to 0). Wrap so the day strip gets its own full row. */
@media (max-width:1024px) {
    .dgvs-datebar {
        flex-wrap: wrap;
        overflow-x: hidden;
        row-gap: 10px;
    }

    .dgvs-datebar .dg-ae-tab {
        flex: 1 1 auto;
    }

    .dgvs-datebar .dg-ae-datebar-arrow,
    .dgvs-datebar .dg-ae-dayslist,
    .dgvs-datebar .dg-ae-cal {
        order: 2;
    }

    /* day strip takes the new row and scrolls its chips internally */
    .dgvs-datebar .dg-ae-dayslist {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width:560px) {

    /* week tabs scroll as their own row instead of wrapping into a tall stack */
    .dgvs-datebar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .dgvs-datebar .dg-ae-tab {
        flex: 0 0 auto;
    }

    .dgvs-datebar .dg-ae-datebar-arrow,
    .dgvs-datebar .dg-ae-dayslist,
    .dgvs-datebar .dg-ae-cal {
        order: 0;
    }

    .dgvs-datebar .dg-ae-dayslist {
        flex: 0 0 auto;
        min-width: 200px;
    }
}

@media (max-width:900px) {
    .dgvs-allhead {
        padding: 26px;
        gap: 18px;
    }

    .dgvs-allhead h1 {
        font-size: 28px;
    }
}

@media (max-width:640px) {
    .dgvs-allhead {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
        gap: 14px;
        background:
            linear-gradient(180deg, rgba(234, 241, 255, .93) 0%, rgba(234, 241, 255, .88) 100%),
            url('/DekoWebAsset/images/dekogo/seminars-banner.jpg') center / cover no-repeat;
    }

    .dgvs-allhead h1 {
        font-size: 24px;
        margin: 10px 0 6px;
    }

    .dgvs-allhead .dgvs-hero-lead {
        font-size: 14px;
    }

    .dgvs-allhead .dgvs-btn-outline {
        width: 100%;
        justify-content: center;
    }

    /* two-up cards read better than one giant card on phones */
    .dgvs-cards-all {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dgvs-block-head {
        gap: 10px;
    }

    .dgvs-block-head h2 {
        font-size: 18px;
    }
}

@media (max-width:480px) {
    .dgvs-pagination {
        gap: 5px;
        margin-top: 22px;
    }

    .dgvs-page-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    /* keep the numbered pages, but hide the wide Prev/Next labels to save room */
    .dgvs-page-nav {
        padding: 0;
        min-width: 36px;
    }

    .dgvs-page-nav span,
    .dgvs-page-nav .dgvs-page-label {
        display: none;
    }
}

@media (max-width:360px) {
    .dgvs-cards-all {
        grid-template-columns: 1fr;
    }
}

/* ---- Virtual Seminars hero — enhanced ---- */
.dgvs-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 44px;
    background: linear-gradient(120deg, #E9F1FF 0%, #F4F8FF 48%, #EAF3FF 100%);
    border: 1px solid #E1EAFB;
}

.dgvs-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .12), transparent 70%);
    pointer-events: none;
}

.dgvs-hero-l {
    position: relative;
    z-index: 2;
}

.dgvs-hero h1 {
    color: #0F172A;
}

.dgvs-hero-lead {
    font-size: 17px;
}

/* Stats strip */
.dgvs-hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 24px;
}

.dgvs-hero-stats>div {
    position: relative;
    padding-right: 30px;
}

.dgvs-hero-stats>div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #D5E0F5;
}

.dgvs-hero-stats strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
}

.dgvs-hero-stats strong i {
    color: #F59E0B;
    font-size: 16px;
    margin-left: 2px;
}

.dgvs-hero-stats span {
    font-size: 12px;
    color: #64748B;
}

/* Image area */
.dgvs-hero-r {
    position: relative;
    z-index: 2;
}

.dgvs-hero-glow {
    position: absolute;
    inset: -10px;
    border-radius: 24px;
    background: radial-gradient(circle at 70% 40%, rgba(37, 99, 235, .18), transparent 60%);
    filter: blur(8px);
    z-index: -1;
}

.dgvs-hero-r img {
    box-shadow: none;
}

.dgvs-hero-live {
    position: absolute;
    left: 14px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(11, 18, 32, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.dgvs-hero-live .dgvs-dot {
    width: 8px;
    height: 8px;
}

@media (max-width:768px) {
    .dgvs-hero {
        padding: 24px;
    }

    .dgvs-hero-stats {
        gap: 18px;
        margin-top: 18px;
    }

    .dgvs-hero-stats>div {
        padding-right: 18px;
    }

    .dgvs-hero-stats strong {
        font-size: 20px;
    }
}

@media (max-width:420px) {
    .dgvs-hero-stats {
        flex-wrap: wrap;
        gap: 14px;
    }
}

/* ---- Virtual Seminars hero — match reference (image 1): open layout, tighter spacing ---- */
.dgvs-hero {
    grid-template-columns: 1.05fr 1fr;
    gap: 30px;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 0 14px;
    margin-bottom: 10px;
    overflow: visible;
}

.dgvs-hero::before {
    display: none;
}

.dgvs-hero h1 {
    margin: 6px 0 4px;
}

.dgvs-hero-sub {
    margin-bottom: 16px;
}

.dgvs-hero-btns {
    margin-top: 4px;
}

.dgvs-hero-r {
    align-self: stretch;
}

.dgvs-hero-r img {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;
    box-shadow: none;
}

.dgvs-hero-glow {
    display: none;
}

@media (max-width:1024px) {
    .dgvs-hero-r img {
        max-height: 300px;
    }
}

/* Hero stays two-column on tablet (uses the width); stacks only on phones */
@media (max-width:640px) {
    .dgvs-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* it's a wide 3:1 banner — show it whole at natural aspect, lightly framed */
    .dgvs-hero-r img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        border-radius: 14px;
        border: 1px solid #E6EEFB;
        box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
        background: #fff;
    }

    /* keep both CTAs on one row, sharing the width */
    .dgvs-hero-btns {
        margin-top: 8px;
        flex-direction: row;
        gap: 10px;
    }

    .dgvs-hero-btns a {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 11px 10px;
        font-size: 13px;
        gap: 6px;
        text-align: center;
        line-height: 1.25;
    }
}

/* ---- Seminars listing (index) responsive hardening ---- */
/* Medium widths (1025–1300): the page grid is still 2-col, so the Live card's
   3rd CTA column crushes the body. Drop the CTA below → 2-col media+body. */
@media (min-width:1025px) and (max-width:1300px) {
    .dgvs-live {
        grid-template-columns: 280px 1fr;
    }

    .dgvs-live-cta {
        grid-column: 1 / -1;
        flex-direction: row;
        align-self: auto;
    }

    .dgvs-live-cta a {
        flex: 1;
        max-width: 240px;
    }
}

/* Live card stacked (≤768): full-width media + stacked CTA buttons */
@media (max-width:768px) {
    .dgvs-live-media img {
        height: 200px;
    }

    .dgvs-live-cta a {
        width: 100%;
        max-width: none;
        justify-content: center;
    }
}

/* Featured-host rows + section heads stay tidy on small phones */
@media (max-width:600px) {
    .dgvs-block-head {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dgvs-host {
        flex-wrap: wrap;
    }

    .dgvs-host-body {
        min-width: 0;
    }

    .dgvs-live-host {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   Virtual Seminar Registration (.dgsr-) — STATIC demo checkout page.
   ========================================================================= */
.dgsr-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.dgsr-top .dgvs-brand {
    font-size: 15px;
}

.dgsr-top h1 {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    margin: 8px 0 4px;
}

.dgsr-top p {
    color: #64748B;
    font-size: 14px;
    margin: 0;
}

.dgsr-steps {
    display: flex;
    align-items: flex-start;
}

.dgsr-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    text-align: center;
}

.dgsr-step::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #E2E8F0;
    z-index: 0;
}

.dgsr-step:last-child::after {
    display: none;
}

.dgsr-step b {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    background: #fff;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.dgsr-step i {
    font-style: normal;
    font-size: 12px;
    color: #94A3B8;
}

.dgsr-step.is-active b {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}

.dgsr-step.is-active i {
    color: #1D4ED8;
    font-weight: 600;
}

.dgsr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
}

.dgsr-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.dgsr-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgsr-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.dgsr-card h3 em {
    font-style: normal;
    color: #94A3B8;
    font-weight: 500;
    font-size: 13px;
}

.dgsr-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1D4ED8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dgsr-signin {
    margin-left: auto;
    font-size: 13px;
    color: #64748B;
}

.dgsr-signin strong {
    color: #2563EB;
}

.dgsr-card-sub {
    color: #94A3B8;
    font-size: 13px;
    margin: 0 0 14px;
}

.dgsr-field2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.dgsr-field3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

@media (max-width: 640px) {
    .dgsr-field3 {
        grid-template-columns: 1fr;
    }
}

.dgsr-col-full {
    grid-column: 1 / -1;
}

.dgsr-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 7px;
}

.dgsr-card label em {
    font-style: normal;
    color: #94A3B8;
    font-weight: 500;
}

.dgsr-card input[type=text],
.dgsr-card input[type=email],
.dgsr-card input[type=tel] {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    box-sizing: border-box;
}

.dgsr-card input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgsr-phone {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.dgsr-phone-cc {
    flex: 0 0 auto;
    width: auto;
    max-width: 42%;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 30px 14px 12px;
    font-size: 15px;
    line-height: 1.2;
    color: #0F172A;
    background-color: #F8FAFC;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.dgsr-phone-cc:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgsr-phone input {
    flex: 1 1 auto;
    min-width: 0;
}

.dgsr-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    margin-top: 14px;
    font-weight: 500;
}

/* Add-ons */
.dgsr-addons {
    display: grid;
    gap: 12px;
}

.dgsr-addon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
}

.dgsr-addon.is-on {
    border-color: #2563EB;
    background: #F8FAFF;
}

.dgsr-addon-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.dgsr-addon-body {
    flex: 1;
    min-width: 0;
}

.dgsr-addon-body strong {
    display: block;
    font-size: 14px;
}

.dgsr-addon-body>span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin: 2px 0;
}

.dgsr-learn {
    color: #2563EB;
    font-size: 12px;
    font-weight: 600;
}

.dgsr-addon-price {
    font-weight: 700;
    font-size: 14px;
    margin-left: auto;
}

.dgsr-addon-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dgsr-cbx {
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 6px;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
}

.dgsr-addon-cb:checked~.dgsr-cbx {
    background: #2563EB;
    border-color: #2563EB;
}

.dgsr-addon-cb:checked~.dgsr-cbx::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Payment */
.dgsr-secure-tag {
    margin-left: auto;
    color: #94A3B8;
    font-size: 12px;
    font-weight: 500;
}

.dgsr-secure-tag i {
    color: #16A34A;
}

.dgsr-pays {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px 0 16px;
}

.dgsr-pay {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    padding: 11px 12px;
    cursor: pointer;
    position: relative;
}

.dgsr-pay.is-selected {
    border-color: #2563EB;
    background: #F8FAFF;
}

.dgsr-pay input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dgsr-pay-name {
    font-size: 13px;
    font-weight: 600;
}

.dgsr-pay-ic {
    font-size: 20px;
    color: #475569;
    display: flex;
    gap: 5px;
    align-items: center;
}

.dgsr-pay-ic .fa-cc-visa {
    color: #1A1F71;
}

.dgsr-pay-ic .fa-cc-mastercard {
    color: #EB001B;
}

.dgsr-pay-ic .fa-cc-amex {
    color: #2E77BC;
}

.dgsr-pay-ic .fa-cc-paypal {
    color: #003087;
}

.dgsr-gpay {
    font-size: 13px;
    font-weight: 700;
}

.dgsr-cardfields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dgsr-cardnum,
.dgsr-cvc {
    position: relative;
}

.dgsr-cardnum input,
.dgsr-cvc input {
    width: 100%;
}

.dgsr-cardnum i,
.dgsr-cvc i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
}

.dgsr-pay-note {
    color: #94A3B8;
    font-size: 12px;
    margin: 14px 0 0;
    text-align: center;
}

.dgsr-pay-note i {
    color: #16A34A;
}

.dgsr-free-note {
    color: #16A34A;
    font-size: 13px;
    margin: 14px 0 0;
    text-align: center;
    font-weight: 600;
}

/* Dynamic funnel additions */
.dgsr-alert {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.dgsr-alert i {
    margin-right: 6px;
}

.dgsr-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dgsr-tier {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 13px 14px;
    cursor: pointer;
}

.dgsr-tier.is-on {
    border-color: #2563EB;
    background: #F8FAFF;
}

.dgsr-tier input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dgsr-tier .dgsr-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
}

.dgsr-tier input:checked+.dgsr-radio {
    border-color: #2563EB;
}

.dgsr-tier input:checked+.dgsr-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2563EB;
}

.dgsr-tier-body {
    flex: 1;
    min-width: 0;
}

.dgsr-tier-body strong {
    display: block;
    font-size: 14px;
}

.dgsr-tier-body>span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin-top: 2px;
}

.dgsr-tier-badge {
    display: inline-block;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 6px;
    font-style: normal;
}

.dgsr-tier-price {
    font-weight: 700;
    font-size: 14px;
    margin-left: auto;
    white-space: nowrap;
}

.dgsr-card-el {
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    padding: 13px 12px;
    background: #fff;
}

/* Split Stripe fields (Card Number / Expiry / CVC) styled like the text inputs */
.dgsr-stripe-field {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 15px 16px;
    background: #fff;
}

.dgsr-stripe-field.StripeElement--focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgsr-stripe-field.StripeElement--invalid {
    border-color: #DC2626;
}

.dgsr-cardrow {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 14px;
}

.dgsr-paypal {
    margin-top: 12px;
    min-height: 46px;
}

/* Promo code in the order summary */
.dgsr-promo {
    margin: 4px 0 0;
}

.dgsr-promo .dgsr-promo-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.dgsr-promo-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 14px;
    color: #0F172A;
}

.dgsr-promo-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgsr-promo .dgvs-btn-outline.sm {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Remove state of the promo Apply button */
.dgsr-promo .dgvs-btn-outline.sm.is-remove {
    color: #DC2626;
    border-color: #FECACA;
    background: #FEF2F2;
}

.dgsr-promo-input[readonly] {
    background: #F8FAFC;
    color: #475569;
}

.dgsr-promo-status {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
}

.dgsr-promo-status.is-ok {
    color: #047857;
}

.dgsr-promo-status.is-err {
    color: #DC2626;
}

.dgsr-disc {
    color: #047857;
    font-weight: 600;
}

/* Info tooltip on Platform Fee / Tax */
.dgsr-info {
    position: relative;
    cursor: help;
    color: #94A3B8;
    outline: none;
}

.dgsr-info::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: 210px;
    background: #0F172A;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 20;
    pointer-events: none;
}

.dgsr-info::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0F172A;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 20;
}

.dgsr-info:hover::after,
.dgsr-info:focus::after,
.dgsr-info:hover::before,
.dgsr-info:focus::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 600px) {
    .dgsr-cardrow {
        grid-template-columns: 1fr;
    }
}

.dgsr-card-err {
    color: #EF4444;
    font-size: 12px;
    margin-top: 6px;
    min-height: 14px;
}

.dgvs-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #64748B;
    font-size: 15px;
    padding: 48px 18px;
}

/* Summary */
.dgsr-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 18px;
}

.dgsr-summary {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgsr-summary h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.dgsr-sum-media img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
}

.dgsr-sum-title {
    display: block;
    font-size: 15px;
    margin: 12px 0 8px;
}

.dgsr-sum-meta {
    list-style: none;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #F1F5F9;
    display: grid;
    gap: 6px;
}

.dgsr-sum-meta li {
    font-size: 12px;
    color: #64748B;
}

.dgsr-sum-meta i {
    color: #2563EB;
    width: 14px;
}

.dgsr-livebadge {
    background: #EF4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.dgsr-sum-block {
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgsr-sum-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94A3B8;
    font-weight: 700;
    margin-bottom: 6px;
}

.dgsr-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    padding: 3px 0;
}

.dgsr-remove {
    color: #CBD5E1;
    cursor: pointer;
    margin-left: 6px;
}

.dgsr-remove:hover {
    color: #EF4444;
}

.dgsr-sum-totals {
    padding: 12px 0;
}

.dgsr-sum-totals .fa-info-circle {
    color: #CBD5E1;
    font-size: 11px;
}

.dgsr-sum-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #E2E8F0;
    padding-top: 12px;
    margin-bottom: 14px;
}

.dgsr-sum-grand span {
    font-weight: 700;
    font-size: 15px;
}

.dgsr-sum-grand strong {
    font-size: 18px;
}

.dgsr-sum-grand strong span {
    color: #2563EB;
}

.dgsr-terms {
    color: #94A3B8;
    font-size: 11px;
    text-align: center;
    margin: 10px 0 0;
}

.dgsr-terms a {
    color: #2563EB;
}

/* Deko Go Pass box */
/* Assurance panel: refund policy, payment methods, support */
.dgsr-assure {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 4px 18px;
    margin-bottom: 16px;
}

.dgsr-assure-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
}

.dgsr-assure-row:last-child {
    border-bottom: none;
}

.dgsr-assure-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF4FF;
    color: #2563EB;
    font-size: 14px;
}

.dgsr-assure-row strong {
    display: block;
    font-size: 13.5px;
    color: #111827;
    margin-bottom: 3px;
}

.dgsr-assure-row p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6B7280;
}

.dgsr-assure-row a {
    display: inline-block;
    margin-top: 5px;
    margin-right: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

.dgsr-assure-row a:hover {
    text-decoration: underline;
}

.dgsr-assure-cards {
    display: inline-flex;
    gap: 7px;
    margin-top: 7px;
    font-size: 20px;
    color: #94A3B8;
}

.dgsr-pass {
    background: #EFF4FF;
    border: 1px solid #DBE5FB;
    border-radius: 16px;
    padding: 18px;
}

.dgsr-pass-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.dgsr-pass-ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
}

.dgsr-pass-head strong {
    font-size: 14px;
    color: #1E3A8A;
}

.dgsr-pass p {
    color: #475569;
    font-size: 12px;
    margin: 0 0 10px;
}

.dgsr-pass ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dgsr-pass li {
    font-size: 12px;
    color: #334155;
}

.dgsr-pass li i {
    color: #2563EB;
    margin-right: 7px;
}

.dgsr-trust {
    margin-top: 4px;
}

/* Responsive */
@media (max-width:1024px) {
    .dgsr-grid {
        grid-template-columns: 1fr;
    }

    .dgsr-side {
        position: static;
    }
}

@media (max-width:768px) {
    .dgsr-top {
        flex-direction: column;
    }

    .dgsr-steps {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
    }

    .dgsr-pays {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:600px) {
    .dgsr-field2 {
        grid-template-columns: 1fr;
    }

    /* Trust band: 4 cramped columns → 2 on phones */
    .dgvs-trust.dgsr-trust {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }
}

/* Add-on rows reflow on small screens: icon + text on top, actions below */
@media (max-width:520px) {
    .dgsr-card label.dgsr-addon {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .dgsr-card label.dgsr-addon .dgsr-addon-body {
        flex: 1 1 calc(100% - 62px);
        /* sits beside the 46px icon (+16 gap) → fills row 1 */
    }

    .dgsr-card label.dgsr-addon .dgsr-learn {
        margin-left: 62px;
        /* align under the text, clear of the icon */
        margin-right: auto;
        /* push price + checkbox to the right on row 2 */
        padding-left: 0;
    }
}

@media (max-width:380px) {
    .dgvs-trust.dgsr-trust {
        grid-template-columns: 1fr;
    }
}

/* ---- Registration add-ons: match reference (dark icon tiles, Learn more column) ---- */
/* label.dgsr-addon beats `.dgsr-card label { display:block }` so the row stays a flex row */
.dgsr-card label.dgsr-addon {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.dgsr-addon-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 18px;
}

.dgsr-addon:nth-child(1) .dgsr-addon-ic {
    background: linear-gradient(135deg, #4F46E5, #1E1B4B);
}

.dgsr-addon:nth-child(2) .dgsr-addon-ic {
    background: linear-gradient(135deg, #1E293B, #0B1220);
}

.dgsr-addon:nth-child(3) .dgsr-addon-ic {
    background: linear-gradient(135deg, #0D9488, #0B1220);
}

.dgsr-addon-body {
    flex: 1;
}

.dgsr-addon-body strong {
    font-size: 14px;
}

.dgsr-addon-body>span {
    color: #64748B;
    font-size: 12px;
    margin: 3px 0 0;
}

.dgsr-learn {
    flex: 0 0 auto;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 8px;
}

.dgsr-learn:hover {
    text-decoration: underline;
}

.dgsr-addon-price {
    flex: 0 0 64px;
    margin-left: 0;
    text-align: right;
    font-weight: 700;
}

/* =========================================================================
   Seminar registration confirmation (.dgsc-) — STATIC demo page.
   ========================================================================= */
.dgsc-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 30px;
    align-items: center;
    padding: 6px 0 18px;
}

.dgsc-hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    margin: 6px 0 10px;
    color: #0F172A;
}

/* Keep the emoji glued to the title so it never wraps onto its own line */
.dgsc-party {
    font-size: .82em;
    white-space: nowrap;
}

.dgsc-hero-lead {
    color: #2563EB;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 10px;
}

.dgsc-hero-sub {
    color: #64748B;
    font-size: 14px;
    max-width: 540px;
    margin: 0 0 18px;
}

.dgsc-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dgsc-email {
    color: #64748B;
    font-size: 13px;
    margin: 16px 0 0;
}

.dgsc-email i {
    color: #16A34A;
    margin-right: 6px;
}

.dgsc-hero-r img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Scoped to the seminar page wrapper (<main class="… dgsc">). Unscoped, this
   block sat later in the file than the pass-code/transfer .dgsc-card and won
   the cascade on every page — left-aligning cards that are meant to be centred. */
.dgsc .dgsc-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    text-align: left;
}

/* Registered seminar card */
.dgsc-seminar {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 240px;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 22px;
}

.dgsc-sem-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 190px;
}

.dgsc-sem-media img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    display: block;
}

.dgsc-livenow {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.dgsc-sem-body {
    text-align: left;
    /* override the centered .dgsc-card default */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dgsc-sem-body h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #0F172A;
}

.dgsc-sem-body p {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 12px;
}

.dgsc-sem-host {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.dgsc-sem-host img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.dgsc-sem-host strong {
    display: block;
    font-size: 13px;
}

.dgsc-sem-host span {
    color: #94A3B8;
    font-size: 12px;
}

.dgsc-sem-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: #475569;
    font-size: 12px;
}

.dgsc-sem-meta span {
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 999px;
    padding: 5px 11px;
    font-weight: 500;
}

.dgsc-sem-meta i {
    color: #2563EB;
    margin-right: 6px;
}

.dgsc-sem-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding-left: 24px;
    border-left: 1px solid #EEF2F7;
}

.dgsc-attend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 13px;
    color: #475569;
}

.dgsc-attend i {
    color: #2563EB;
}

.dgsc-attend strong {
    font-weight: 700;
}

/* Three info cards */
.dgsc-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dgsc-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.dgsc-ic {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #EAF1FE;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.dgsc-card-head strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
}

.dgsc-card-head span {
    color: #64748B;
    font-size: 13px;
    line-height: 1.45;
}

.dgsc-copy {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.dgsc-copy input {
    flex: 1;
    min-width: 0;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: #475569;
    background: #F8FAFC;
}

.dgsc-copy button {
    width: 42px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
    color: #2563EB;
    cursor: pointer;
}

.dgsc-copy button:hover {
    background: #EFF6FF;
}

.dgsc-calbox {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid #EEF2F7;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 4px;
}

.dgsc-cal-date {
    text-align: center;
    background: #EFF6FF;
    border-radius: 10px;
    padding: 8px 12px;
    flex: 0 0 auto;
}

.dgsc-cal-date span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #2563EB;
}

.dgsc-cal-date strong {
    font-size: 20px;
    color: #0F172A;
}

.dgsc-cal-info strong {
    display: block;
    font-size: 13px;
}

.dgsc-cal-info span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin: 2px 0 6px;
}

/* Scoped to the seminar page wrapper. Unscoped, this block turned the
   pass-code/transfer .dgsc-status pill into a full-width grey bar everywhere —
   the reset below was aimed at that leak but applied it in the wrong direction. */
.dgsc .dgsc-status {
    display: flex;
    gap: 11px;
    align-items: center;
    border: 1px solid #E6EBF1;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    /* the base .dgsc-status pill rule still matches in here, so undo its type styling */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.dgsc .dgsc-status i {
    color: #16A34A;
    font-size: 20px;
}

.dgsc .dgsc-status strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    text-transform: none;
    letter-spacing: normal;
}

.dgsc .dgsc-status span {
    color: #64748B;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Muted status (certificate not included) */
.dgsc .dgsc-status.dgsc-status-muted {
    border-color: #E2E8F0;
    background: #F8FAFC;
}

.dgsc .dgsc-status.dgsc-status-muted i {
    color: #94A3B8;
}

.dgsc .dgsc-status.dgsc-status-muted span {
    color: #64748B;
}

/* Replay badge variant of the live-now pill */
.dgsc-livenow.dgsc-replay {
    background: #1E293B;
}

/* Copied feedback on the join-link button */
.dgsc-copy button.is-copied {
    color: #047857;
    border-color: #A7F3D0;
    background: #ECFDF5;
}

/* Feature band */
.dgsc-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    background: linear-gradient(180deg, #EFF4FF 0%, #E8F0FE 100%);
    border: 1px solid #E2E9FA;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 6px;
}

.dgsc-band-item {
    display: flex;
    gap: 14px;
    align-items: center;
}

.dgsc-band-ic {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .12);
}

.dgsc-band-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 3px;
}

.dgsc-band-item span {
    color: #64748B;
    font-size: 13px;
    line-height: 1.4;
}

/* Trust footer — registered page: plain (no blue box), centered, divider-separated
   single-line labels, matching the reference. Scoped to .dgsc so the shared
   .dgvs-trust band on the detail/register pages is left untouched. */
.dgsc .dgvs-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 22px 0 4px;
    margin-top: 10px;
}

.dgsc .dgvs-trust>div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 26px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1;
}

.dgsc .dgvs-trust>div+div {
    border-left: 1px solid #E2E8F0;
}

.dgsc .dgvs-trust>div i {
    color: #2563EB;
    font-size: 16px;
}

/* Responsive */
@media (max-width:1024px) {

    /* Keep the hero on one row; just tighten the gap */
    .dgsc-hero {
        gap: 22px;
    }

    .dgsc-three {
        gap: 14px;
    }
}

/* Feature band: 4-across on one row, then 2×2 when it gets tight */
@media (max-width:940px) {
    .dgsc-band {
        grid-template-columns: 1fr 1fr;
        gap: 18px 22px;
    }
}

/* Keep the seminar card + info cards on one row until they get too tight */
@media (max-width:840px) {
    .dgsc-seminar {
        grid-template-columns: 1fr;
    }

    .dgsc-three {
        grid-template-columns: 1fr;
    }

    .dgsc-sem-media,
    .dgsc-sem-media img {
        min-height: 0;
        height: 220px;
    }

    /* Stacked: the side divider becomes a top divider */
    .dgsc-sem-side {
        border-left: 0;
        border-top: 1px solid #EEF2F7;
        padding-left: 0;
        padding-top: 16px;
    }
}

/* Tablet: keep the hero on one row, just tighten type + spacing to fit */
@media (max-width:768px) {
    .dgsc-hero {
        gap: 18px;
    }

    .dgsc-hero h1 {
        font-size: clamp(24px, 3.6vw, 32px);
    }

    .dgsc-hero-lead {
        font-size: 16px;
    }

    .dgsc-hero-sub {
        font-size: 13px;
    }

    .dgsc-hero-r img {
        max-height: 260px;
        object-fit: cover;
    }

    .dgsc-sem-media,
    .dgsc-sem-media img {
        height: 200px;
    }
}

/* Phones: hero finally stacks (text over image) */
@media (max-width:680px) {
    .dgsc-hero {
        grid-template-columns: 1fr;
    }

    .dgsc-hero h1 {
        font-size: clamp(26px, 7vw, 34px);
    }

    .dgsc-hero-r img {
        max-height: 280px;
    }
}

@media (max-width:600px) {
    .dgsc-hero-btns {
        flex-direction: column;
    }

    .dgsc-hero-btns a {
        width: 100%;
        justify-content: center;
    }

    .dgsc-band {
        grid-template-columns: 1fr;
    }

    .dgsc-band-item {
        align-items: flex-start;
    }

    /* Trust footer: drop dividers and let labels wrap on phones */
    .dgsc .dgvs-trust {
        gap: 12px 0;
    }

    .dgsc .dgvs-trust>div {
        flex: 1 1 45%;
        justify-content: center;
        padding: 6px 12px;
    }

    .dgsc .dgvs-trust>div+div {
        border-left: 0;
    }
}

@media (max-width:380px) {
    .dgsc .dgvs-trust>div {
        flex-basis: 100%;
    }
}

/* =========================================================================
   Certificate of Completion (.dgcert-) — STATIC demo page.
   ========================================================================= */
.dgcert-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dgcert-head h1 {
    font-size: clamp(30px, 4.2vw, 42px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0F172A;
    margin: 0;
}

.dgcert-head h1 span {
    -webkit-text-fill-color: initial;
}

.dgcert-head p {
    color: #64748B;
    font-size: 15px;
    margin: 6px 0 0;
}

.dgcert-completed {
    display: flex;
    gap: 13px;
    align-items: center;
    background: #fff;
    border: 1px solid #EBEFF6;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.dgcert-completed>i {
    color: #2563EB;
    font-size: 18px;
}

.dgcert-completed span {
    display: block;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.dgcert-completed strong {
    font-size: 14px;
    color: #0F172A;
}

.dgcert-completed-ok {
    color: #fff !important;
    background: #2563EB;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}

/* Stage + confetti */
.dgcert-stage {
    position: relative;
    background: transparent;
    border-radius: 20px;
    padding: 40px 20px;
    overflow: hidden;
}

.dgcert-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: .85;
}

.dgcert-confetti.c1 {
    top: 8%;
    left: 10%;
    background: #F59E0B;
    transform: rotate(20deg);
}

.dgcert-confetti.c2 {
    top: 22%;
    left: 88%;
    background: #2563EB;
    transform: rotate(-15deg);
}

.dgcert-confetti.c3 {
    top: 60%;
    left: 6%;
    background: #2563EB;
    border-radius: 50%;
}

.dgcert-confetti.c4 {
    top: 74%;
    left: 92%;
    background: #F59E0B;
    border-radius: 50%;
}

.dgcert-confetti.c5 {
    top: 40%;
    left: 3%;
    background: #FBBF24;
    transform: rotate(40deg);
}

.dgcert-confetti.c6 {
    top: 14%;
    left: 60%;
    background: #FCD34D;
    transform: rotate(-30deg);
}

/* Certificate card */
.dgcert-card {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
    overflow: hidden;
}

/* faint inset frame line running around the inside of the certificate */
.dgcert-card::after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(201, 151, 39, .32);
    border-radius: 10px;
    pointer-events: none;
    z-index: 0;
}


.dgcert-corner {
    position: absolute;
    width: 230px;
    height: 230px;
    z-index: 1;
}

/* glossy navy ribbon + bright gold accent line + thin navy outer ribbon */
.dgcert-corner.tl {
    top: 0;
    left: 0;
    border-top-left-radius: 14px;
    background: linear-gradient(135deg,
            #14306F 0%, #20429A 10%, #3A5FC0 20%, #1B3A86 28%, #14306F 31%,
            #CC9A2E 31%, #F7DA82 34.5%, #D8A93A 38%,
            rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 42%,
            #2A4DA4 42%, #16336F 45%,
            transparent 45%);
}

.dgcert-corner.br {
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 14px;
    background: linear-gradient(315deg,
            #14306F 0%, #20429A 10%, #3A5FC0 20%, #1B3A86 28%, #14306F 31%,
            #CC9A2E 31%, #F7DA82 34.5%, #D8A93A 38%,
            rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 42%,
            #2A4DA4 42%, #16336F 45%,
            transparent 45%);
}

.dgcert-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 48px;
}

/* no CSS transforms here — html2canvas (PDF export) doesn't apply them reliably,
   so vertical placement uses top/height and the right side is mirrored inside the SVG */
.dgcert-laurel {
    position: absolute;
    top: 19%;
    height: 62%;
    width: auto;
    color: #9DB2D6;
    opacity: .2;
    z-index: -1;
    pointer-events: none;
}

.dgcert-laurel.l {
    left: 5%;
}

.dgcert-laurel.r {
    right: 5%;
}

.dgcert-brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    margin-bottom: 14px;
}

.dgcert-logo-img {
    height: 34px;
    width: auto;
    display: block;
}

.dgcert-deko-go {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2563EB;
}

.dgcert-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dgcert-brand strong {
    display: block;
    font-size: 16px;
    color: #1E3A8A;
}

.dgcert-brand span {
    font-size: 10px;
    letter-spacing: .12em;
    color: #2563EB;
    font-weight: 700;
}

.dgcert-academy {
    display: block;
    color: #2563EB;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    margin-bottom: 8px;
}

.dgcert-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 8px;
}

.dgcert-title em {
    font-style: italic;
    font-weight: 400;
}

.dgcert-divider {
    display: block;
    color: #9AA7B8;
    margin-bottom: 16px;
    line-height: 0;
}

.dgcert-divider svg {
    max-width: 100%;
    height: auto;
}

.dgcert-certify {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 6px;
}

.dgcert-name {
    font-family: 'Great Vibes', 'Snell Roundhand', 'Brush Script MT', cursive;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    color: #2563EB;
    margin: 0 0 8px;
}

.dgcert-has {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 6px;
}

.dgcert-seminar {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px;
}

.dgcert-blurb {
    color: #64748B;
    font-size: 13px;
    max-width: 440px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.dgcert-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
}

.dgcert-foot>.dgcert-foot-item:first-child {
    justify-self: end;
}

.dgcert-foot>.dgcert-foot-item:last-child {
    justify-self: start;
}

.dgcert-foot>.dgcert-seal {
    justify-self: center;
}

.dgcert-foot-item {
    display: flex;
    gap: 11px;
    align-items: center;
    background: #fff;
    border: 1px solid #E6EBF3;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.dgcert-foot-item>i {
    color: #2563EB;
    font-size: 18px;
}

.dgcert-foot-item span {
    display: block;
    font-size: 10px;
    letter-spacing: .06em;
    color: #94A3B8;
    font-weight: 700;
}

.dgcert-foot-item strong {
    font-size: 13px;
}

.dgcert-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    /* the badge art reserves ribbon space below the circle — pull it down so the
       medallion aligns with the two side cards, ribbons hang below */
    transform: translateY(11px);
}

.dgcert-seal img {
    width: 92px;
    height: auto;
    display: block;
}

/* Actions */
.dgcert-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 22px auto 0;
}

.dgcert-actions .dgvs-btn-primary,
.dgcert-actions .dgvs-btn-outline {
    justify-content: center;
    padding: 13px;
}

/* Two boxes */
.dgcert-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 880px;
    margin: 18px auto 0;
}

.dgcert-box {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgcert-box strong {
    display: block;
    font-size: 15px;
}

.dgcert-box span {
    display: block;
    color: #64748B;
    font-size: 12px;
    margin: 3px 0 12px;
}

.dgcert-share {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.dgcert-soc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    text-decoration: none;
}

.dgcert-soc i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.dgcert-soc.is-li i {
    background: #0A66C2;
    border-radius: 9px;
}

.dgcert-soc.is-fb i {
    background: #1877F2;
}

.dgcert-soc.is-x i {
    background: #000;
}

.dgcert-soc:hover {
    color: #2563EB;
}

.dgcert-next {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.dgcert-next-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

.dgcert-next-ic svg {
    width: 150px;
    height: auto;
}

@media (max-width: 520px) {
    .dgcert-next-ic svg {
        width: 110px;
    }
}

@media (max-width:880px) {
    .dgcert-stage {
        padding: 30px 12px;
    }
}

@media (max-width:768px) {
    .dgcert-inner {
        padding: 30px 24px;
    }

    .dgcert-title {
        font-size: 26px;
    }

    .dgcert-name {
        font-size: 42px;
    }

    .dgcert-academy {
        font-size: 11px;
    }

    .dgcert-seminar {
        font-size: 19px;
    }

    .dgcert-foot {
        gap: 18px;
    }

    .dgcert-corner {
        width: 140px;
        height: 140px;
    }

    /* laurels read as floating stalks on narrow widths — hide them */
    .dgcert-laurel {
        display: none;
    }
}

@media (max-width:560px) {
    .dgcert-stage {
        padding: 22px 8px;
        border-radius: 14px;
    }

    .dgcert-inner {
        padding: 26px 16px;
    }

    .dgcert-card::after {
        inset: 10px;
    }

    /* laurels crowd the text on phones */
    .dgcert-laurel {
        display: none;
    }

    .dgcert-title {
        font-size: 22px;
    }

    .dgcert-name {
        font-size: 34px;
    }

    .dgcert-blurb {
        font-size: 12px;
    }

    .dgcert-actions,
    .dgcert-two {
        grid-template-columns: 1fr;
    }

    /* stack the footer: card, badge, card — all centred */
    .dgcert-foot {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
    }

    .dgcert-foot>.dgcert-foot-item:first-child,
    .dgcert-foot>.dgcert-foot-item:last-child {
        justify-self: center;
        width: 100%;
        max-width: 260px;
    }

    .dgcert-foot>.dgcert-seal {
        order: -1;
        /* badge sits on top of the stack */
    }

    .dgcert-corner {
        width: 100px;
        height: 100px;
    }

    /* What's Next: stack text over illustration */
    .dgcert-next {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .dgcert-next-ic {
        align-self: center;
        margin-top: 6px;
    }

    .dgcert-share {
        gap: 18px;
    }
}

@media (max-width:380px) {
    .dgcert-name {
        font-size: 28px;
    }

    .dgcert-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Certificate page: plain trust footer (no blue box), centred with dividers */
.dgcert .dgvs-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 22px 0 4px;
    margin-top: 12px;
}

.dgcert .dgvs-trust>div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 26px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1;
}

.dgcert .dgvs-trust>div+div {
    border-left: 1px solid #E2E8F0;
}

.dgcert .dgvs-trust>div i {
    color: #2563EB;
    font-size: 16px;
}

.dgcert-trust-leaf {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #C7D6F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dgcert-trust-leaf i {
    font-size: 11px !important;
}

.dgcert-trust-brand {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    color: #1E3A8A;
}

@media (max-width: 600px) {
    .dgcert .dgvs-trust {
        gap: 12px 0;
    }

    .dgcert .dgvs-trust>div {
        flex: 1 1 45%;
        justify-content: center;
        padding: 6px 12px;
    }

    .dgcert .dgvs-trust>div+div {
        border-left: 0;
    }
}

/* Print: "Download PDF" outputs only the certificate card, with its colours.
 *
 * Every selector is guarded on body:has(.dgcert-stage). Unguarded, the
 * `body * { visibility: hidden }` below applied to EVERY page that loads this
 * stylesheet — the whole Deko Go section printed as a blank sheet, because
 * nothing outside the certificate page has a .dgcert-stage to turn back on.
 * The @page margin was global for the same reason.
 */
@media print {
    /* @page cannot be scoped to a selector, so this one stays global — a 12mm
       margin is a sane default for any printed page here. */
    @page {
        margin: 12mm;
    }

    body:has(.dgcert-stage) * {
        visibility: hidden !important;
    }

    body:has(.dgcert-stage) .dgcert-stage,
    body:has(.dgcert-stage) .dgcert-stage * {
        visibility: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .dgcert-stage {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .dgcert-card {
        width: 100% !important;
        max-width: 880px !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .dgcert-confetti {
        display: none !important;
    }
}

/* =========================================================================
   Deko Go Pass (.dgpass-) — public marketing / info page.
   ========================================================================= */
.dgpass-crumb {
    margin: 20px 0;
    font-size: 14px;
}

.dgpass-crumb span {
    color: #2563EB;
}

/* ---- Hero ---- */
.dgpass-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center;
    padding: 6px 0 28px;
}

.dgpass-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 12px 0 12px;
    color: #0F172A;
}

.dgpass-lead {
    color: #475569;
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 560px;
}

.dgpass-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dgpass-hero-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 0 0;
    padding: 0;
}

.dgpass-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.dgpass-hero-points i {
    color: #16A34A;
}

/* Membership card visual */
.dgpass-hero-r {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Signed-in members see their real pass on the hero card. */
.dgpass-card.is-live {
    box-shadow: 0 22px 45px -18px rgba(29, 78, 216, .75);
}

.dgpass-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: #2563EB;
    text-decoration: none;
}

.dgpass-card-link:hover {
    color: #1D4ED8;
    text-decoration: underline;
}

.dgpass-card {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1.6/1;
    border-radius: 20px;
    padding: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 45%, #1E3A8A 100%);
    box-shadow: 0 22px 45px -18px rgba(29, 78, 216, .7);
}

.dgpass-card::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -50px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}

.dgpass-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.dgpass-card-brand {
    font-weight: 800;
    letter-spacing: .06em;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dgpass-card-chip {
    width: 40px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FCD34D, #F59E0B);
    color: #7C2D12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dgpass-card-mid {
    position: relative;
    z-index: 1;
}

.dgpass-card-label {
    font-size: 12px;
    opacity: .85;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dgpass-card-id {
    display: block;
    font-size: 22px;
    letter-spacing: .06em;
    margin-top: 4px;
}

.dgpass-card-bottom {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.dgpass-card-bottom small {
    display: block;
    font-size: 10px;
    opacity: .8;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dgpass-card-bottom span {
    font-size: 14px;
    font-weight: 600;
}

/* ---- Section scaffold ---- */
.dgpass-section {
    padding: 34px 0;
}

.dgpass-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 26px;
}

.dgpass-section-head h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    margin: 0 0 8px;
    color: #0F172A;
}

.dgpass-section-head p {
    color: #64748B;
    font-size: 15px;
    margin: 0;
}

/* ---- Benefits ---- */
.dgpass-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dgpass-benefit {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    transition: box-shadow .15s, transform .15s;
}

.dgpass-benefit:hover {
    box-shadow: 0 12px 26px -12px rgba(16, 24, 40, .18);
    transform: translateY(-2px);
}

.dgpass-benefit-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
}

.dgpass-benefit strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    color: #0F172A;
}

.dgpass-benefit span {
    color: #64748B;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Steps ---- */
.dgpass-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dgpass-step {
    position: relative;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
}

.dgpass-step-no {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 30px;
    font-weight: 800;
    color: #E2E8F0;
    line-height: 1;
}

.dgpass-step-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.dgpass-step strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    color: #0F172A;
}

.dgpass-step span {
    color: #64748B;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Pricing tiers ---- */
.dgpass-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.dgpass-tier {
    position: relative;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.dgpass-tier.is-featured {
    border-color: #2563EB;
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .45);
    transform: translateY(-4px);
}

.dgpass-tier-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563EB;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.dgpass-tier h3 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #0F172A;
}

.dgpass-tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 18px;
}

.dgpass-tier-price strong {
    font-size: 38px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -.02em;
}

.dgpass-tier-price span {
    color: #94A3B8;
    font-size: 15px;
    font-weight: 600;
}

.dgpass-tier-feats {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 11px;
    flex: 1;
}

.dgpass-tier-feats li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #475569;
    font-size: 14px;
}

.dgpass-tier-feats li i {
    color: #16A34A;
    margin-top: 3px;
}

.dgpass-tier .block {
    margin-top: auto;
}

/* ---- FAQ ---- */
.dgpass-faqs {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dgpass-faq {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0 18px;
}

.dgpass-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    font-weight: 600;
    color: #0F172A;
    font-size: 15px;
}

.dgpass-faq summary::-webkit-details-marker {
    display: none;
}

.dgpass-faq summary i {
    color: #94A3B8;
    transition: transform .2s;
    flex: 0 0 auto;
}

.dgpass-faq[open] summary i {
    transform: rotate(180deg);
}

.dgpass-faq p {
    margin: 0;
    padding: 0 0 16px;
    color: #64748B;
    font-size: 14px;
    line-height: 1.55;
}

/* ---- CTA band ---- */
.dgpass-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 14px 0 40px;
    padding: 34px 38px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(120deg, #1D4ED8 0%, #2563EB 55%, #1E3A8A 100%);
    box-shadow: 0 18px 40px -20px rgba(29, 78, 216, .6);
}

.dgpass-cta h2 {
    margin: 0 0 6px;
    font-size: 24px;
    color: #fff;
}

.dgpass-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.dgpass-cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.dgpass-cta-btns .dgvs-btn-primary {
    background: #fff;
}

.dgpass-cta-btns .dgvs-btn-primary,
.dgpass-cta-btns .dgvs-btn-primary * {
    color: #1D4ED8 !important;
}

.dgpass-cta-btns .dgvs-btn-outline.light,
.dgpass-cta-btns .dgvs-btn-outline.light * {
    border-color: rgba(255, 255, 255, .6);
    color: #fff !important;
    background: transparent;
}

/* ---- Responsive ---- */
@media (max-width:1024px) {
    .dgpass-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .dgpass-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:860px) {
    .dgpass-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dgpass-hero-r {
        order: -1;
    }

    .dgpass-card {
        max-width: 360px;
    }
}

@media (max-width:760px) {
    .dgpass-tiers {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }

    .dgpass-tier.is-featured {
        transform: none;
    }

    .dgpass-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 22px;
    }

    .dgpass-cta-btns a {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width:560px) {

    .dgpass-benefits,
    .dgpass-steps {
        grid-template-columns: 1fr;
    }

    .dgpass-hero-btns a {
        flex: 1;
        justify-content: center;
    }
}

/* =========================================================================
   Deko Go Pass — enhanced visual layer (richer, more premium)
   ========================================================================= */
.dgpass {
    background: linear-gradient(180deg, #FBFCFE 0%, #F4F7FC 100%);
}

/* Hero → soft gradient panel with a radial accent */
.dgpass-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 44px;
    margin-top: 4px;
    border-radius: 24px;
    border: 1px solid #E1EAFB;
    background: linear-gradient(120deg, #EAF1FF 0%, #F4F8FF 50%, #EEF6FF 100%);
    box-shadow: 0 18px 40px -26px rgba(29, 78, 216, .4);
}

.dgpass-hero::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -90px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .16), transparent 70%);
    pointer-events: none;
}

.dgpass-hero-l,
.dgpass-hero-r {
    position: relative;
    z-index: 1;
}

.dgpass-hero h1 {
    font-weight: 800;
}

.dgpass-hero .dgvs-brand {
    background: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.dgpass-card {
    transform: rotate(-3deg);
    transition: transform .3s ease;
}

.dgpass-hero-r:hover .dgpass-card {
    transform: rotate(0deg) translateY(-4px);
}

.dgpass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 60%);
}

/* Section headings get a tiny accent underline */
.dgpass-section-head h2 {
    position: relative;
    display: inline-block;
}

.dgpass-section-head h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, #2563EB, #7C3AED);
}

/* Benefit cards → gradient icon tiles, colour-varied, stronger lift */
.dgpass-benefit {
    border-radius: 18px;
    padding: 24px 22px;
}

.dgpass-benefit:hover {
    box-shadow: 0 18px 34px -16px rgba(16, 24, 40, .22);
    transform: translateY(-4px);
}

.dgpass-benefit-ic {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    color: #fff;
    font-size: 21px;
    margin-bottom: 16px;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6);
}

/* keep the glyphs crisp white on the coloured tiles / circles */
.dgpass-benefit-ic i,
.dgpass-step-ic i {
    color: #fff !important;
}

.dgpass-benefit:nth-child(6n+1) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.dgpass-benefit:nth-child(6n+2) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #A78BFA, #6D28D9);
    box-shadow: 0 8px 18px -8px rgba(124, 58, 237, .55);
}

.dgpass-benefit:nth-child(6n+3) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #34D399, #047857);
    box-shadow: 0 8px 18px -8px rgba(5, 150, 105, .5);
}

.dgpass-benefit:nth-child(6n+4) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #FBBF24, #B45309);
    box-shadow: 0 8px 18px -8px rgba(217, 119, 6, .5);
}

.dgpass-benefit:nth-child(6n+5) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #22D3EE, #0E7490);
    box-shadow: 0 8px 18px -8px rgba(8, 145, 178, .5);
}

.dgpass-benefit:nth-child(6n+6) .dgpass-benefit-ic {
    background: linear-gradient(135deg, #FB7185, #BE123C);
    box-shadow: 0 8px 18px -8px rgba(225, 29, 72, .5);
}

/* Steps → gradient circles + connector line */
.dgpass-steps {
    position: relative;
}

.dgpass-step {
    background: #fff;
    border-color: #E8EEF6;
}

.dgpass-step:hover {
    box-shadow: 0 14px 28px -16px rgba(16, 24, 40, .2);
}

.dgpass-step-ic {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    box-shadow: 0 10px 20px -8px rgba(37, 99, 235, .55);
}

.dgpass-step-no {
    color: #EEF2FA;
    font-size: 34px;
}

/* Pricing → premium featured plan */
.dgpass-tier {
    border-radius: 20px;
}

.dgpass-tier.is-featured {
    background: linear-gradient(160deg, #1E3A8A 0%, #1D4ED8 55%, #2563EB 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 28px 55px -22px rgba(29, 78, 216, .7);
}

.dgpass-tier.is-featured h3,
.dgpass-tier.is-featured .dgpass-tier-price strong {
    color: #fff;
}

.dgpass-tier.is-featured .dgpass-tier-price span {
    color: rgba(255, 255, 255, .8);
}

.dgpass-tier.is-featured .dgpass-tier-feats li {
    color: rgba(255, 255, 255, .92);
}

.dgpass-tier.is-featured .dgpass-tier-feats li i {
    color: #86EFAC;
}

/* ---- The tier the member is already on ---- */
.dgpass-tier.is-current {
    border-color: #16A34A;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.dgpass-tier-badge.is-current,
.dgpass-tier.is-featured .dgpass-tier-badge.is-current {
    background: #16A34A;
}

/* Reads as a status, not a buy button — but still links to the pass. */
.dgpass-tier-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    background: #F0FDF4;
    color: #15803D;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: default;
}

.dgpass-tier-current:hover {
    background: #DCFCE7;
    color: #15803D;
}

.dgpass-tier.is-featured .dgpass-tier-current {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.dgpass-tier.is-featured .dgpass-tier-current:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.dgpass-tier.is-featured .dgpass-tier-badge {
    background: #F59E0B;
    box-shadow: 0 6px 14px -4px rgba(245, 158, 11, .7);
}

/* white button on the dark featured card — beat the global `.dgvs-btn-primary * { color:#fff !important }` */
.dgpass-tier.is-featured .dgvs-btn-primary {
    background: #fff;
}

.dgpass-tier.is-featured .dgvs-btn-primary,
.dgpass-tier.is-featured .dgvs-btn-primary * {
    color: #1D4ED8 !important;
}

.dgpass-tier:not(.is-featured):hover {
    box-shadow: 0 18px 36px -18px rgba(16, 24, 40, .22);
    transform: translateY(-3px);
}

.dgpass-tier {
    transition: box-shadow .15s, transform .15s;
}

/* FAQ hover affordance */
.dgpass-faq {
    transition: border-color .15s, box-shadow .15s;
}

.dgpass-faq:hover {
    border-color: #CBD5E1;
    box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .18);
}

.dgpass-faq[open] {
    border-color: #BFD3F6;
    box-shadow: 0 8px 20px -12px rgba(37, 99, 235, .25);
}

@media (max-width:768px) {
    .dgpass-hero {
        padding: 26px 22px;
    }
}

@media (max-width:760px) {

    /* don't shrink the featured plan on mobile after the scale override above */
    .dgpass-tier.is-featured {
        transform: none;
    }
}

/* ---- Pass checkout (.dgpass-co-) ---- */
.dgpass-co {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
    margin: 6px 0 48px;
}

.dgpass-co-pay {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    order: 1;
}

.dgpass-co-pay h1 {
    font-size: 24px;
    margin: 0 0 18px;
    color: #0F172A;
}

.dgpass-co-summary {
    order: 2;
    background: linear-gradient(160deg, #1E3A8A, #2563EB);
    color: #fff;
    border-radius: 18px;
    padding: 26px;
    position: sticky;
    top: 18px;
    box-shadow: 0 18px 40px -22px rgba(29, 78, 216, .6);
}

.dgpass-co-eyebrow {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
}

.dgpass-co-summary h2 {
    color: #fff;
    font-size: 22px;
    margin: 6px 0 12px;
}

.dgpass-co-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.dgpass-co-price strong {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.dgpass-co-price span {
    opacity: .8;
    font-size: 14px;
}

.dgpass-co-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.dgpass-co-feats li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}

.dgpass-co-feats li i {
    color: #86EFAC;
    margin-top: 3px;
}

.dgpass-co-note {
    margin: 16px 0 0;
    font-size: 13px;
    opacity: .85;
    display: flex;
    gap: 7px;
    align-items: center;
}

.dgpass-co-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 8px;
}

.dgpass-co-card {
    border: 1px solid #CBD5E1;
    border-radius: 11px;
    padding: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dgpass-co-card.StripeElement--focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dgpass-co-card.StripeElement--invalid {
    border-color: #DC2626;
}

/* Card number full width; expiry + CVC side by side beneath it. */
.dgpass-co-field + .dgpass-co-field,
.dgpass-co-grid { margin-top: 14px; }

/* ...but the grid's own columns sit side by side, not stacked. */
.dgpass-co-grid .dgpass-co-field + .dgpass-co-field { margin-top: 0; }

.dgpass-co-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dgpass-co-hint {
    color: #94A3B8;
    font-size: 12px;
    cursor: help;
}

.dgpass-co-brands {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    color: #94A3B8;
    font-size: 24px;
}

@media (max-width:480px) {
    .dgpass-co-grid { grid-template-columns: 1fr; }
}

.dgpass-co-err {
    color: #DC2626;
    font-size: 13px;
    min-height: 18px;
    margin-top: 8px;
}

.dgpass-co-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 6px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

.dgpass-co-total span {
    color: #64748B;
    font-size: 14px;
}

.dgpass-co-total strong {
    font-size: 22px;
    color: #0F172A;
}

.dgpass-co-alert {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dgvs-btn-primary.lg {
    padding: 14px 20px;
    font-size: 15px;
    margin-top: 18px;
}

.dgpass-co-secure {
    color: #94A3B8;
    font-size: 13px;
    text-align: center;
    margin: 14px 0 0;
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
}

@media (max-width:780px) {
    .dgpass-co {
        grid-template-columns: 1fr;
    }

    .dgpass-co-summary {
        order: 0;
        position: static;
    }

    .dgpass-co-pay {
        order: 1;
    }
}

/* ---- Active-pass banner on the wallet (My Deko Go Pass) ---- */
.dgp-flash {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.dgp-nopass {
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 16px;
    padding: 26px;
    text-align: center;
    margin-bottom: 18px;
}

.dgp-nopass h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #0F172A;
}

/* ===== All Hosts page (dekogo.seminars.hosts) ===== */
.dgvs-hostgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.dgvs-hostcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    transition: box-shadow .18s ease, transform .18s ease;
}

.dgvs-hostcard:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.dgvs-hostcard-top {
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 14px;
}

.dgvs-hostcard-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid #EAF1FF;
}

.dgvs-hostcard-id {
    min-width: 0;
}

.dgvs-hostcard-id strong {
    display: block;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.25;
}

.dgvs-hostcard-id span {
    display: block;
    color: #64748B;
    font-size: 12.5px;
    margin-top: 2px;
}

.dgvs-hostcard-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1D4ED8;
    background: #EAF1FF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.dgvs-hostcard-sems {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dgvs-hostcard-sems li {
    font-size: 13px;
    line-height: 1.35;
}

.dgvs-hostcard-sems a {
    color: #334155;
    text-decoration: none;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.dgvs-hostcard-sems a:hover {
    color: #1D4ED8;
}

.dgvs-hostcard-sems a i {
    color: #94A3B8;
    font-size: 11px;
}

.dgvs-hostcard-more {
    color: #94A3B8;
    font-size: 12px;
    font-weight: 600;
}

.dgvs-hostcard .dgvs-btn-outline.block {
    margin-top: auto;
    text-align: center;
}

@media (max-width:560px) {
    .dgvs-hostgrid {
        grid-template-columns: 1fr;
    }
}

.dgp-nopass p {
    margin: 0 0 16px;
    color: #64748B;
    font-size: 14px;
}

/* =========================================================
   Landing v2 — organizer-focused hero, host/why sections,
   enriched event cards. Appended; scoped under .dekogo-page.
   ========================================================= */

/* ---- Hero (organizer messaging) ---- */
.dekogo-page .dg-hero-h1-lg {
    font-size: 46px;
    line-height: 1.05;
    font-weight: 800;
    margin: 0 0 16px;
    color: #0F172A;
    letter-spacing: -1.4px;
}

.dekogo-page .dg-hero-sub {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 22px;
    font-weight: 500;
}

.dekogo-page .dg-hero-trust {
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 0 26px;
    padding-left: 12px;
    border-left: 3px solid var(--dg-blue-soft);
}

/* ---- Host Events with DekoGo ---- */
.dg-host-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
}

.dg-host-head h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--dg-text);
    margin: 0 0 10px;
    letter-spacing: -.6px;
}

.dg-host-head p {
    font-size: 15px;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

.dg-host-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dg-host-card {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 24px 22px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.dg-host-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dg-shadow);
    border-color: #CBD5E1;
}

.dg-host-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--dg-blue-soft);
    color: var(--dg-blue-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 14px;
}

.dg-host-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dg-text);
    margin: 0 0 8px;
}

.dg-host-card p {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

.dg-host-cta {
    text-align: center;
    margin-top: 30px;
}

/* ---- Why Local Organizers Choose DekoGo ---- */
.dg-why-section {
    background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
    border-top: 1px solid var(--dg-border);
    border-bottom: 1px solid var(--dg-border);
}

.dg-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dg-why-card {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    padding: 22px 20px;
    text-align: left;
}

.dg-why-ic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dg-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.dg-why-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dg-text);
    margin: 0 0 6px;
}

.dg-why-card p {
    font-size: 13px;
    color: #64748B;
    line-height: 1.55;
    margin: 0;
}

/* ---- Enriched event cards ---- */
.dg-event-media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.dg-event-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 60px);
    z-index: 2;
}

.dg-event-badges .dg-event-badge {
    position: static;
    top: auto;
    left: auto;
}

.dg-event-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.dg-event-actions .dg-event-fav {
    position: static;
    top: auto;
    right: auto;
}

.dg-event-share {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--dg-text);
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s;
}

.dg-event-share:hover {
    background: var(--dg-blue);
    color: #fff;
}

.dg-event-body h4 a {
    color: var(--dg-text);
}

.dg-event-body h4 a:hover {
    color: var(--dg-blue-2);
}

.dg-event-host {
    font-size: 11.5px;
    color: #64748B;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.dg-event-host strong {
    color: var(--dg-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.dg-verified {
    color: var(--dg-blue);
    font-size: 12px;
    flex: 0 0 auto;
}

.dg-event-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: #64748B;
}

.dg-event-social span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dg-event-social i {
    color: var(--dg-yellow);
}

/* Two equal columns that are allowed to shrink. Without minmax(0, …) the
   nowrap label sets the column's min width, so a longer translated CTA
   ("Acheter des billets", "Comprar entradas") pushes the row past the card
   and gets clipped. */
.dg-event-btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}

.dekogo-page .dg-event-btn {
    padding: 7px 0px;
    font-size: 11.5px;
    border-radius: 8px;
    width: 100%;
    min-width: 0;
    /* Long localized labels wrap instead of overflowing the card. */
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.25;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .dg-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .dg-host-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dekogo-page .dg-hero-h1-lg {
        font-size: 38px;
    }
}

@media (max-width: 640px) {

    .dg-host-grid,
    .dg-why-grid {
        grid-template-columns: 1fr;
    }

    .dg-host-head h2 {
        font-size: 24px;
    }

    .dekogo-page .dg-hero-h1-lg {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .dg-event-btns {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Event Detail v2 — hero meta, highlights, venue extras,
   organizer, FAQ, reviews, related-event rails. Appended.
   ========================================================= */

/* ---- 5.1 Hero meta ---- */
.dg-evd-meta {
    margin: 6px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dg-evd-cat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dg-evd-cat-badge {
    background: var(--dg-blue-soft);
    color: var(--dg-blue-2);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: capitalize;
}

.dg-evd-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.dg-evd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: #334155;
}

.dg-evd-meta-item strong {
    color: var(--dg-text);
    font-weight: 800;
}

.dg-evd-meta-item .muted {
    color: #94A3B8;
    font-weight: 500;
}

.dg-evd-meta-item .is-star {
    color: var(--dg-yellow);
}

.dg-evd-meta-item i {
    color: #64748B;
}

.dg-evd-verified-org {
    color: var(--dg-green);
    font-weight: 700;
}

.dg-evd-verified-org i {
    color: var(--dg-green);
}

.dg-evd-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}

.dg-evd-countdown i {
    color: #B45309;
}

.dg-evd-meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dg-evd-save-hero,
.dg-evd-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--dg-border);
    background: #fff;
    color: var(--dg-text);
    cursor: pointer;
    transition: all .18s ease;
}

.dg-evd-save-hero:hover,
.dg-evd-share-btn:hover {
    border-color: var(--dg-blue);
    color: var(--dg-blue);
}

.dg-evd-save-hero.is-saved {
    border-color: var(--dg-pink);
    color: var(--dg-pink);
    background: #FFF1F6;
}

.dg-evd-save-hero.is-saved i {
    color: var(--dg-pink);
}

/* ---- 5.2 Event highlights ---- */
.dg-evd-highlights-box {
    margin: 20px 0 4px;
    padding: 18px 20px;
    background: #F8FAFF;
    border: 1px solid var(--dg-border);
    border-radius: 12px;
}

.dg-evd-highlights-box h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--dg-text);
}

.dg-evd-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}

.dg-evd-highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: #334155;
    line-height: 1.4;
}

.dg-evd-highlights-list li i {
    color: var(--dg-green);
    margin-top: 2px;
    flex: 0 0 auto;
}

/* ---- 5.3 Venue extras ---- */
.dg-evd-venue-extra {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dg-evd-venue-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dg-evd-venue-line>i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--dg-blue-soft);
    color: var(--dg-blue-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 30px;
}

.dg-evd-venue-line strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--dg-text);
    margin-bottom: 2px;
}

.dg-evd-venue-line p {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.5;
}

/* ---- 5.4 Organizer extras ---- */
.dg-evd-org-links {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.dg-evd-org-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dg-blue-2);
}

.dg-evd-org-links a:hover {
    text-decoration: underline;
}

.dg-evd-org-events {
    margin-top: 18px;
}

.dg-evd-org-events h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--dg-text);
}

.dg-evd-mini-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.dg-evd-mini-rail>.dg-evd-like-card {
    scroll-snap-align: start;
}

/* ---- 5.5 Shared block titles ---- */
.dg-evd-block-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--dg-text);
    margin: 0 0 16px;
    letter-spacing: -.4px;
}

.dg-evd-faq,
.dg-evd-reviews,
.dg-evd-more {
    margin-top: 40px;
}

/* ---- 5.5 FAQ ---- */
.dg-evd-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dg-evd-faq-item {
    border: 1px solid var(--dg-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.dg-evd-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--dg-text);
    text-align: left;
}

.dg-evd-faq-q i {
    color: #94A3B8;
    transition: transform .2s ease;
    flex: 0 0 auto;
}

.dg-evd-faq-item.is-open .dg-evd-faq-q i {
    transform: rotate(180deg);
}

.dg-evd-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    padding: 0 18px;
}

.dg-evd-faq-item.is-open .dg-evd-faq-a {
    max-height: 400px;
    padding: 0 18px 16px;
}

.dg-evd-faq-a p {
    margin: 0;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.6;
}

/* ---- 5.5 Reviews ---- */
.dg-evd-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.dg-evd-reviews-head .dg-evd-block-title {
    margin: 0;
}

.dg-evd-reviews-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dg-text);
}

.dg-evd-reviews-score i {
    color: var(--dg-yellow);
}

.dg-evd-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Organizer reviews: 3-card row + sort filter */
.dg-org-reviews-grid {
    grid-template-columns: repeat(3, 1fr);
}

.dg-org-reviews-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.dg-org-rvf-btn {
    border: 1px solid var(--dg-border);
    background: #fff;
    color: var(--dg-text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.dg-org-rvf-btn:hover {
    border-color: var(--dg-blue);
    color: var(--dg-blue);
}

.dg-org-rvf-btn.is-active {
    background: var(--dg-blue);
    border-color: var(--dg-blue);
    color: #fff;
}

.dg-org-reviews-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.dg-org-pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--dg-border);
    background: #fff;
    color: var(--dg-text);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.dg-org-pg-btn:hover:not(:disabled) {
    border-color: var(--dg-blue);
    color: var(--dg-blue);
}

.dg-org-pg-btn.is-active {
    background: var(--dg-blue);
    border-color: var(--dg-blue);
    color: #fff;
}

.dg-org-pg-btn:disabled {
    opacity: .45;
    cursor: default;
}

@media (max-width: 900px) {
    .dg-org-reviews-grid {
        grid-template-columns: 1fr;
    }
}

.dg-evd-review-card {
    border: 1px solid var(--dg-border);
    border-radius: 12px;
    padding: 16px 18px;
    background: #fff;
}

.dg-evd-review-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.dg-evd-review-ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dg-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex: 0 0 38px;
}

.dg-evd-review-who {
    flex: 1;
    min-width: 0;
}

.dg-evd-review-who strong {
    display: block;
    font-size: 13.5px;
    color: var(--dg-text);
    font-weight: 700;
}

.dg-evd-review-stars {
    font-size: 11px;
    color: var(--dg-yellow);
    margin-top: 2px;
}

.dg-evd-review-date {
    font-size: 11.5px;
    color: #94A3B8;
    white-space: nowrap;
}

.dg-evd-review-card h5 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dg-text);
}

.dg-evd-review-card p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
    line-height: 1.6;
}

.dg-evd-reviews-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px;
    border: 1px dashed var(--dg-border);
    border-radius: 12px;
    color: #94A3B8;
    font-size: 14px;
}

/* ---- 5.5 More-events grids ---- */
.dg-evd-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .dg-evd-more-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-evd-reviews-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dg-evd-highlights-list {
        grid-template-columns: 1fr;
    }

    .dg-evd-more-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-evd-block-title {
        font-size: 19px;
    }
}

/* =========================================================
   6. Premium digital ticket pass (event-detail sidebar)
   ========================================================= */

/* Entry-status pill on the pass header */
.dg-evd-yt-status {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .2px;
}

.dg-evd-yt-status.is-valid {
    background: rgba(16, 185, 129, .18);
    color: #34D399;
}

.dg-evd-yt-status.is-valid i {
    color: #34D399;
}

.dg-evd-yt-status.is-soon {
    background: rgba(245, 158, 11, .18);
    color: #FBBF24;
}

.dg-evd-yt-status.is-soon i {
    color: #FBBF24;
}

.dg-evd-yt-status.is-used {
    background: rgba(239, 68, 68, .18);
    color: #F87171;
}

.dg-evd-yt-status.is-used i {
    color: #F87171;
}

.dg-evd-yt-status.is-expired {
    background: rgba(148, 163, 184, .18);
    color: #CBD5E1;
}

.dg-evd-yt-status.is-expired i {
    color: #CBD5E1;
}

.dg-evd-yt-info p i {
    color: #64748B;
    width: 12px;
    margin-right: 2px;
}

.dg-evd-yt-addr {
    font-size: 10.5px !important;
    color: #64748B !important;
}

/* Ticket detail grid (holder / type / number / admission) */
.dg-evd-yt-meta {
    margin-top: 12px;
    padding: 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

.dg-evd-yt-meta>div {
    min-width: 0;
}

.dg-evd-yt-meta span {
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748B;
    font-weight: 700;
    margin-bottom: 2px;
}

.dg-evd-yt-meta strong {
    display: block;
    font-size: 12.5px;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Security line under the QR */
.dg-evd-yt-secure {
    text-align: center;
    font-size: 10.5px;
    color: #94A3B8;
    line-height: 1.5;
    padding: 4px 4px 2px;
}

.dg-evd-yt-secure i {
    color: #34D399;
    margin-right: 3px;
}

.dg-evd-yt-secure span {
    display: block;
    font-size: 9.5px;
    color: #64748B;
    letter-spacing: .3px;
}

/* Wallet / PDF / Share action buttons */
.dg-evd-yt-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dg-evd-yt-actions .dg-evd-yt-wallet {
    margin: 0;
    padding: 9px 10px;
    font-size: 11.5px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.dg-evd-yt-actions .dg-evd-yt-wallet i {
    font-size: 14px;
}

.dg-evd-yt-actions .dg-evd-yt-wallet:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.dg-evd-yt-actions .is-apple {
    background: #fff;
    color: #0F172A;
    border-color: #fff;
}

.dg-evd-yt-actions .is-apple:hover {
    background: #F1F5F9;
}

.dg-evd-yt-actions .is-google i {
    color: #EA4335;
}

.dg-evd-yt-actions .is-pdf i {
    color: #F87171;
}

.dg-evd-yt-actions .is-share i {
    color: #60A5FA;
}

/* =========================================================
   Organizer & Venue public profile pages
   ========================================================= */

/* ---- Shared cards ---- */
.dg-org-card {
    background: #fff;
    border: 1px solid var(--dg-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.dg-org-card h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--dg-text);
    margin: 0 0 12px;
}

.dg-org-section {
    margin-bottom: 34px;
}

.dg-org-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px;
    border: 1px dashed var(--dg-border);
    border-radius: 12px;
    color: #94A3B8;
    font-size: 14px;
}

/* ---- Organizer cover + header ---- */
.dg-org-cover {
    height: 260px;
    background: linear-gradient(120deg, #1D4ED8 0%, #7C3AED 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}

.dg-org-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .1) 0%, rgba(15, 23, 42, .45) 100%);
}

.dg-org-cover-top {
    position: relative;
    z-index: 2;
    padding-top: 18px;
}

.dg-org-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dg-org-back:hover {
    color: #fff;
}

.dg-org-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: -60px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.dg-org-logo {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: var(--dg-shadow);
    flex: 0 0 120px;
}

.dg-org-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-org-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, #1D4ED8, #7C3AED);
}

.dg-org-head-main {
    flex: 1;
    min-width: 220px;
    padding-bottom: 6px;
}

.dg-org-head-main h1 {
    font-size: 30px;
    font-weight: 800;
    color: var(--dg-text);
    margin: 0 0 8px;
    letter-spacing: -.6px;
}

.dg-org-vfd {
    color: var(--dg-blue);
    font-size: 22px;
    vertical-align: middle;
}

.dg-org-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13.5px;
    color: #475569;
}

.dg-org-stats i {
    color: #94A3B8;
}

.dg-org-stats .is-star {
    color: var(--dg-yellow);
}

.dg-org-stats strong {
    color: var(--dg-text);
}

.dg-org-head-actions {
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
    flex-wrap: wrap;
}

.dekogo-page .dg-org-follow.is-following {
    background: #fff !important;
    color: var(--dg-blue-2) !important;
    border-color: var(--dg-blue-2) !important;
}

/* ---- Organizer body grid ---- */
.dg-org-grid,
.dg-ven-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 28px;
    padding-bottom: 50px;
}

.dg-org-about {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

.dg-org-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dg-org-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #475569;
}

.dg-org-contact li i {
    color: #94A3B8;
    width: 16px;
}

.dg-org-contact a {
    color: var(--dg-blue-2);
    font-weight: 600;
    word-break: break-word;
}

.dg-org-socials {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.dg-org-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dg-blue-soft);
    color: var(--dg-blue-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background .15s, color .15s;
}

.dg-org-socials a:hover {
    background: var(--dg-blue);
    color: #fff;
}

.dg-org-past {
    opacity: .92;
}

.dg-org-review-ev {
    font-size: 11.5px !important;
    color: var(--dg-blue-2) !important;
    margin: 0 0 6px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- Venue cover ---- */
.dg-ven-cover {
    min-height: 320px;
    background: linear-gradient(120deg, #0B1220 0%, #1E293B 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.dg-ven-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .2) 0%, rgba(15, 23, 42, .8) 100%);
}

.dg-ven-cover-inner {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 30px;
    color: #fff;
}

.dg-ven-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    text-decoration: none;
}

.dg-ven-back:hover {
    color: #fff;
}

/* Venue search box on the cover (jumps to the /venues directory) */
.dg-ven-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    margin-top: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 5px 5px 5px 14px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
}

.dg-ven-search>i {
    color: #94A3B8;
    font-size: 14px;
    flex-shrink: 0;
}

.dg-ven-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    height: 38px;
    font-size: 14px;
    color: #0F172A;
    background: transparent;
}

.dg-ven-search button {
    flex-shrink: 0;
    border: 0;
    height: 38px;
    padding: 0 20px;
    border-radius: 9px;
    background: var(--dg-blue, #2563EB);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.dg-ven-search button:hover {
    background: var(--dg-blue-2, #1D4ED8);
}

@media (max-width: 480px) {
    .dg-ven-search button {
        padding: 0 14px;
    }
}

.dg-ven-cover-inner h1 {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -.8px;
}

.dg-ven-cover-inner p {
    font-size: 15px;
    color: #E2E8F0;
    margin: 0 0 12px;
}

.dg-ven-cover-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #CBD5E1;
}

.dg-ven-cover-meta i {
    color: var(--dg-yellow);
}

.dg-ven-map {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--dg-border);
    height: 200px;
    margin-bottom: 12px;
}

.dg-ven-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.dg-ven-addr {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 12px;
}

.dekogo-page .dg-ven-dir {
    width: 100%;
}

.dg-ven-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dg-ven-amenities span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dg-blue-soft);
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}

.dg-ven-amenities i {
    color: var(--dg-blue-2);
}

.dg-ven-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dg-ven-photo {
    border-radius: 12px;
    overflow: hidden;
    height: 130px;
    display: block;
}

.dg-ven-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.dg-ven-photo:hover img {
    transform: scale(1.06);
}

/* ---- Deko Go pagination (styles Bootstrap's paginator markup) ---- */
.dg-pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.dg-pagination .pagination {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--dg-border, #E9EDF3);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}

.dg-pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.dg-pagination .page-item .page-link:hover {
    background: var(--dg-blue-soft, #EFF4FF);
    color: var(--dg-blue-2, #1D4ED8);
}

.dg-pagination .page-item .page-link:active {
    transform: scale(.94);
}

.dg-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--dg-blue, #2563EB), var(--dg-blue-2, #1D4ED8));
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}

.dg-pagination .page-item.active .page-link:hover {
    color: #fff;
}

.dg-pagination .page-item.disabled .page-link {
    color: #CBD5E1;
    opacity: 1;
    pointer-events: none;
}

.dg-pagination .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

/* =========================================================
   Venues directory (/venues)
   ========================================================= */
.dg-vd-hero {
    background: linear-gradient(120deg, #0B1220 0%, #1E293B 100%);
    color: #fff;
    padding: 46px 0 40px;
}

.dg-vd-hero h1 {
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -.6px;
}

.dg-vd-hero>.dekogo-container>p {
    font-size: 15px;
    color: #CBD5E1;
    margin: 0 0 22px;
}

.dg-vd-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dg-vd-search-field {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.dg-vd-search-field i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
}

.dg-vd-search-field input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 40px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #0F172A;
    font-size: 14px;
}

.dg-vd-search-field input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}

.dg-vd-select {
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #0F172A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dekogo-page .dg-vd-search .dg-btn-primary {
    height: 46px;
    padding: 0 24px;
}

.dg-vd-clear {
    color: #CBD5E1;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
}

.dg-vd-clear:hover {
    color: #fff;
}

.dg-vd-resultbar {
    margin: 22px 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.dg-vd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-bottom: 10px;
}

.dg-vd-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dg-border, #E5E7EB);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dg-vd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -18px rgba(15, 23, 42, .5);
}

.dg-vd-card-img {
    position: relative;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #E2E8F0;
}

.dg-vd-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.dg-vd-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dg-vd-card-body h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.3;
}

.dg-vd-card-addr {
    font-size: 12.5px;
    color: #64748B;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dg-vd-card-addr i {
    color: #94A3B8;
    margin-right: 4px;
}

.dg-vd-card-events {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dg-blue-2, #1D4ED8);
}

.dg-vd-card-events i {
    margin-right: 4px;
}

.dg-vd-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748B;
}

.dg-vd-empty i {
    font-size: 40px;
    color: #CBD5E1;
    margin-bottom: 12px;
}

.dg-vd-empty h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #334155;
}

.dg-vd-empty p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .dg-vd-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .dg-vd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dg-vd-hero h1 {
        font-size: 27px;
    }

    .dg-vd-hero {
        padding: 34px 0 30px;
    }
}

@media (max-width: 560px) {
    .dg-vd-search-field {
        flex-basis: 100%;
    }

    .dekogo-page .dg-vd-search .dg-btn-primary {
        flex: 1;
    }
}

@media (max-width: 440px) {
    .dg-vd-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Organizers directory (/organizers) — reuses .dg-vd-* hero/grid,
   with branded cards (cover + overlapping logo).
   ========================================================= */
.dg-od-card {
    text-align: center;
}

.dg-od-cover {
    height: 88px;
    background: linear-gradient(120deg, #1D4ED8 0%, #7C3AED 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}

.dg-od-logo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .4);
}

.dg-od-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dg-od-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, #1D4ED8, #7C3AED);
}

.dg-od-body {
    padding: 44px 16px 18px;
}

.dg-od-body h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 8px;
    line-height: 1.3;
}

.dg-od-vfd {
    color: var(--dg-blue, #2563EB);
    font-size: 14px;
}

.dg-od-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: #64748B;
}

.dg-od-meta i {
    color: #94A3B8;
    margin-right: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {

    .dg-org-grid,
    .dg-ven-grid {
        grid-template-columns: 1fr;
    }

    .dg-ven-grid {
        gap: 20px;
        margin-top: 20px;
    }

    .dg-ven-cover {
        min-height: 260px;
    }

    .dg-ven-cover-inner h1 {
        font-size: 32px;
    }

    .dg-ven-photos {
        grid-template-columns: repeat(3, 1fr);
    }

    .dg-org-cover {
        height: 210px;
    }

    .dg-org-grid {
        gap: 20px;
        margin-top: 20px;
    }

    .dg-org-head {
        margin-top: -48px;
    }

    .dg-org-head-main h1 {
        font-size: 26px;
    }
}

@media (max-width: 640px) {
    .dg-org-cover {
        height: 168px;
    }

    .dg-org-head {
        margin-top: -40px;
        gap: 14px;
    }

    .dg-org-logo {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        border-radius: 16px;
    }

    .dg-org-head-main {
        min-width: 0;
        flex-basis: calc(100% - 106px);
        padding-bottom: 0;
    }

    .dg-org-head-main h1 {
        font-size: 22px;
    }

    .dg-org-vfd {
        font-size: 18px;
    }

    .dg-org-stats {
        gap: 6px 14px;
        font-size: 12.5px;
    }

    .dg-ven-cover {
        min-height: 210px;
    }

    .dg-ven-cover-inner {
        padding-top: 28px;
        padding-bottom: 22px;
    }

    .dg-ven-cover-inner h1 {
        font-size: 26px;
        letter-spacing: -.4px;
    }

    .dg-ven-cover-inner p {
        font-size: 13.5px;
    }

    .dg-ven-cover-meta {
        gap: 14px;
        font-size: 12.5px;
    }

    .dg-ven-photos {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .dg-ven-photo {
        height: 110px;
    }

    .dg-org-head-actions {
        width: 100%;
    }

    .dekogo-page .dg-org-head-actions .dg-btn {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .dg-ven-cover {
        min-height: 180px;
    }

    .dg-ven-cover-inner h1 {
        font-size: 22px;
    }

    .dg-ven-cover-meta {
        flex-direction: column;
        gap: 6px;
    }

    .dg-ven-photos {
        grid-template-columns: 1fr 1fr;
    }

    .dg-org-cover {
        height: 140px;
    }

    .dg-org-head {
        margin-top: -34px;
    }

    .dg-org-logo {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .dg-org-head-main {
        flex-basis: calc(100% - 90px);
    }

    .dg-org-head-main h1 {
        font-size: 20px;
    }

    .dg-org-stats {
        flex-direction: column;
        gap: 5px;
    }
}

/* Unified card badge colour variants (mapEvent uses is-* classes) */
.dg-event-badge.is-red {
    background: var(--dg-red);
}

.dg-event-badge.is-orange {
    background: var(--dg-yellow);
}

.dg-event-badge.is-green {
    background: var(--dg-green);
}

.dg-event-badge.is-blue {
    background: var(--dg-blue);
}

.dg-event-badge.is-violet {
    background: var(--dg-purple);
}

.dg-event-badge.is-purple {
    background: var(--dg-purple);
}

.dg-event-badge.is-pink {
    background: var(--dg-pink);
}

.dg-event-badge.is-teal {
    background: #0D9488;
}

/* When the unified card sits in the all-events / profile grids, drop the min height
   the old .dg-ae-card relied on so rows stay tidy. */
.dg-ae-grid>.dg-event-card {
    height: 100%;
}

/* Unified card sizing inside the horizontal browse rails (mirrors .dg-ae-card) */
.dg-ae-rail>.dg-event-card {
    flex: 0 0 calc(20% - 11.2px);
    min-width: calc(20% - 11.2px);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(33.333% - 9.4px);
        min-width: calc(33.333% - 9.4px);
    }
}

@media (max-width: 768px) {
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(50% - 7px);
        min-width: calc(50% - 7px);
    }
}

@media (max-width: 480px) {
    .dg-ae-rail>.dg-event-card {
        flex-basis: 82%;
        min-width: 82%;
    }
}

/* =========================================================
   Deko Go — Event Detail responsive polish
   Appended last so it wins over the base rules above.
   Scoped to .dg-evd-* so nothing leaks to other pages.
   ========================================================= */

/* Event-detail sliders show 6 cards per view on desktop (site rails stay at 5). */
.dg-evd-more .dg-ae-rail>.dg-event-card,
.dg-evd-more .dg-ae-rail>.dg-ae-card,
.dg-ae-rail>.dg-event-card {
    flex: 0 0 calc(16.666% - 11.67px);
    min-width: calc(16.666% - 11.67px);
}

@media (max-width: 1100px) {

    .dg-evd-more .dg-ae-rail>.dg-event-card,
    .dg-evd-more .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(33.333% - 9.4px);
        min-width: calc(33.333% - 9.4px);
    }
}

@media (max-width: 768px) {

    .dg-evd-more .dg-ae-rail>.dg-event-card,
    .dg-evd-more .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: calc(50% - 7px);
        min-width: calc(50% - 7px);
    }
}

@media (max-width: 480px) {

    .dg-evd-more .dg-ae-rail>.dg-event-card,
    .dg-evd-more .dg-ae-rail>.dg-ae-card,
    .dg-ae-rail>.dg-event-card {
        flex-basis: 82%;
        min-width: 82%;
    }
}

/* Fluid hero: scale with the viewport instead of a fixed 380px
   (was too tall on large tablets, a touch tall on phones). */
.dg-evd-hero-img {
    height: clamp(200px, 32vw, 380px);
}

/* Venue map: fluid height + a soft neutral placeholder so a slow
   or blocked embed reads as a map panel, never a broken void. */
.dg-evd-venue-map {
    height: clamp(150px, 20vw, 190px);
    background:
        radial-gradient(circle at 30% 30%, #eef2f7 0, #e6ebf1 60%, #dde3ea 100%);
}

/* Organizer card: never let the bio crowd or overlap the avatar.
   Fixed round avatar; body wraps under it on very narrow widths. */
.dg-evd-org-card {
    align-items: flex-start;
    flex-wrap: wrap;
}

.dg-evd-org-card img,
.dg-evd-org-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.dg-evd-org-body {
    flex: 1 1 220px;
}

/* Self-contained initials avatar — replaces the unreliable external
   ui-avatars fallback that was rendering as a solid black circle. */
.dg-evd-org-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Desktop: rebalance the Lineup / Schedule / Venue row so the two short
   columns stack beside the tall Venue column instead of leaving a big
   empty gap under them. */
@media (min-width: 1101px) {
    .dg-evd-3col {
        grid-template-columns: 1.1fr 1fr;
        align-items: start;
    }

    .dg-evd-3col>.dg-evd-venue {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Category badge pills wrap cleanly and never force horizontal scroll. */
.dg-evd-cat-badges {
    flex-wrap: wrap;
}

/* Unified header tag row — one cohesive set of chips instead of two
   mismatched badge rows (outline feature pills + blue category pills). */
.dg-evd-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 16px;
}

.dg-evd-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    text-transform: capitalize;
}

.dg-evd-chip.is-cat {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #DBEAFE;
    font-weight: 700;
}

/* Tagline sits directly under the title now — tighten its spacing. */
.dg-evd-title+.dg-evd-desc {
    margin-top: 2px;
    margin-bottom: 12px;
}

/* =========================================================
   Premium digital ticket pass
   ========================================================= */
.dg-evd-yt-phone {
    position: relative;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(37, 99, 235, .38) 0, transparent 55%),
        linear-gradient(168deg, #16204a 0%, #0b1024 52%, #0a1836 100%);
    border-radius: 26px;
    padding: 16px 16px 18px;
    box-shadow:
        0 30px 60px -22px rgba(11, 16, 36, .60),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(15, 23, 42, .06);
}

/* subtle sheen sweeping the top of the pass */
.dg-evd-yt-phone::after {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 46%;
    border-radius: 26px 26px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent);
    pointer-events: none;
}

/* Status chip — clearer, all four states already themed below in base CSS */
.dg-evd-yt-status {
    padding: 4px 11px !important;
    font-size: 10.5px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dg-evd-yt-img {
    height: 122px;
    border-radius: 14px;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* Boarding-pass perforation between the details and the QR stub */
.dg-evd-yt-perf {
    position: relative;
    height: 20px;
    margin: 12px -16px 2px;
    background:
        repeating-linear-gradient(to right, rgba(255, 255, 255, .28) 0 7px, transparent 7px 14px) center / 100% 2px no-repeat;
}

.dg-evd-yt-perf::before,
.dg-evd-yt-perf::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: inset -1px 0 2px rgba(15, 23, 42, .18);
}

.dg-evd-yt-perf::before {
    left: -10px;
}

.dg-evd-yt-perf::after {
    right: -10px;
}

/* QR "stub" — framed white tile + scan hint */
.dg-evd-yt-qr-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #93C5FD;
}

.dg-evd-yt-qr-label i {
    color: #93C5FD;
}

.dg-evd-yt-qr img {
    width: 156px;
    height: 156px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .06);
}

/* Security block a touch more premium */
.dg-evd-yt-secure {
    padding-top: 8px;
}

.dg-evd-yt-secure i {
    color: #34D399;
}

/* "You Might Also Like" uses the full event card, but the sidebar is too
   narrow for two side by side — show ONE full card per slide in the existing
   horizontal scroll-snap slider (arrows/dots already drive it). */
.dg-evd-like-grid>.dg-event-card {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}

.dg-evd-like-grid>.dg-event-card .dg-event-btns {
    flex-wrap: wrap;
}

/* Tablet: give the meta a comfortable 2-up before it stacks, and
   keep the two-column "about" from getting cramped. */
@media (max-width: 900px) {
    .dg-evd-about-row {
        gap: 20px;
    }
}

/* Phones: tighten the hero chrome and the ticket steppers so
   nothing overflows the 360–414px range. */
@media (max-width: 640px) {
    .dg-evd-hero-img {
        height: 210px;
    }

    .dg-evd-hero-badges {
        top: 10px;
        left: 10px;
    }

    .dg-evd-date-card {
        transform: scale(0.9);
        transform-origin: top right;
    }

    .dg-evd-org-follow {
        margin-top: 8px;
    }
}

/* =========================================================
   VIP Table Inquiry modal (event detail page)
   ========================================================= */
.dg-vipmodal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dg-vipmodal.is-open {
    display: flex;
}

.dg-vipmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: dgFade .18s ease;
}

.dg-vipmodal-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    padding: 26px 24px 22px;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45);
    animation: dgPop .22s cubic-bezier(.2, .8, .3, 1);
}

.dg-vipmodal-x {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #94A3B8;
    cursor: pointer;
}

.dg-vipmodal-x:hover {
    color: #475569;
}

.dg-vipmodal-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 20px;
    margin-bottom: 12px;
}

.dg-vipmodal-card h4 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    color: #0F172A;
}

.dg-vipmodal-sub {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
}

.dg-vipform label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 12px;
}

.dg-vipform-row {
    display: flex;
    gap: 12px;
}

.dg-vipform-row>label {
    flex: 1;
}

.dg-vipform input,
.dg-vipform textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0F172A;
    font-family: inherit;
}

.dg-vipform input:focus,
.dg-vipform textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dg-vipform textarea {
    resize: vertical;
}

.dg-vipmodal-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.dg-vipmodal-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all .16s ease;
}

.dg-vipmodal-btn.is-ghost {
    background: #fff;
    color: #334155;
    border: 1.5px solid #E2E8F0;
}

.dg-vipmodal-btn.is-ghost:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.dg-vipmodal-btn.is-primary {
    background: #2563EB;
    color: #fff;
    border: 1.5px solid #2563EB;
}

.dg-vipmodal-btn.is-primary:hover {
    background: #1D4ED8;
    border-color: #1D4ED8;
}

@media (max-width: 480px) {
    .dg-vipform-row {
        flex-direction: column;
        gap: 0;
    }
}

/* =====================================================================
   Section 9 — enriched seminar cards (9.2) + detail sections (9.3)
   ===================================================================== */

/* ---- 9.2 Seminar card enrichments ---- */
.dgvs-card-pricepill {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 7px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    backdrop-filter: blur(2px);
}

.dgvs-card-pricepill.is-free {
    background: #16A34A;
}

/* Speaker avatar — overrides the 104/140px media img rule via higher specificity */
.dgvs-card-media img.dgvs-card-speaker {
    position: absolute;
    left: 12px;
    bottom: -18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
    z-index: 2;
}

.dgvs-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 2px;
}

.dgvs-cbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 6px;
}

.dgvs-cbadge i {
    font-size: 8px;
}

.dgvs-cbadge.cb-live {
    background: #FEE2E2;
    color: #DC2626;
}

.dgvs-cbadge.cb-live i {
    animation: dgvs-pulse 1.4s ease-in-out infinite;
}

.dgvs-cbadge.cb-cert {
    background: #EDE9FE;
    color: #6D28D9;
}

.dgvs-cbadge.cb-cert i {
    font-size: 10px;
}

.dgvs-cbadge.cb-replay {
    background: #FEF3C7;
    color: #B45309;
}

.dgvs-cbadge.cb-replay i {
    font-size: 10px;
}

@keyframes dgvs-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.dgvs-card-host {
    color: #0F172A !important;
    font-weight: 600;
    font-size: 12.5px !important;
    margin-top: 2px;
}

.dgvs-card-host i {
    color: #64748B !important;
}

.dgvs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 7px 0;
    margin-top: 2px;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
}

.dgvs-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748B;
}

.dgvs-card-meta i {
    color: #2563EB;
    font-size: 12px;
}

/* ---- 9.3 Detail: hero flags added (live + language) ---- */
.dgvs-flag.flag-live {
    background: #FEE2E2;
    color: #DC2626;
}

.dgvs-flag.flag-live i {
    color: #DC2626;
    font-size: 8px;
    animation: dgvs-pulse 1.4s ease-in-out infinite;
}

.dgvs-flag.flag-language {
    background: #EFF6FF;
    color: #1D4ED8;
}

.dgvs-flag.flag-language i {
    color: #1D4ED8;
}

/* ---- 9.3 About This Seminar ---- */
.dgvs-about-section {
    margin-bottom: 26px;
}

.dgvs-about {
    color: #334155;
    font-size: 15px;
    line-height: 1.7;
}

.dgvs-about p {
    margin: 0 0 12px;
}

.dgvs-about p:last-child {
    margin-bottom: 0;
}

/* ---- 9.3 Who Should Attend ---- */
.dgvs-audience-section {
    margin-bottom: 26px;
}

.dgvs-audience {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dgvs-audience li {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.dgvs-audience-ic {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #EFF6FF;
    color: #2563EB;
}

/* ---- 9.3 Certificate / Replay info cards ---- */
.dgvs-info-block {
    position: relative;
}

.dgvs-info-ic {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 19px;
    margin-bottom: 12px;
}

.dgvs-info-ic.info-cert {
    background: #EDE9FE;
    color: #6D28D9;
}

.dgvs-info-ic.info-replay {
    background: #FEF3C7;
    color: #B45309;
}

.dgvs-info-block p {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.dgvs-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dgvs-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: #334155;
}

.dgvs-info-list li i {
    color: #16A34A;
    margin-top: 3px;
}

.dgvs-info-until {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700 !important;
    color: #B45309 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* ---- 9.3 Downloadable materials ---- */
.dgvs-materials-section {
    margin-top: 26px;
}

.dgvs-materials-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
    margin: 4px 0 14px;
}

.dgvs-materials-note i {
    color: #2563EB;
}

.dgvs-materials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.dgvs-material {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #fff;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}

a.dgvs-material:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .1);
}

.dgvs-material.is-locked {
    background: #F8FAFC;
    opacity: .8;
}

.dgvs-material-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 17px;
}

.dgvs-material-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dgvs-material-body strong {
    font-size: 13.5px;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgvs-material-body span {
    font-size: 12px;
    color: #94A3B8;
}

.dgvs-material-dl {
    color: #94A3B8;
}

a.dgvs-material:hover .dgvs-material-dl {
    color: #2563EB;
}

/* ---- 9.3 FAQ accordion ---- */
.dgvs-faq-section {
    margin-top: 26px;
}

.dgvs-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dgvs-faq-item {
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
}

.dgvs-faq-item[open] {
    border-color: #BFDBFE;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .06);
}

.dgvs-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    font-weight: 700;
    font-size: 14.5px;
    color: #0F172A;
}

.dgvs-faq-item summary::-webkit-details-marker {
    display: none;
}

.dgvs-faq-item summary i {
    color: #2563EB;
    transition: transform .2s;
    flex: none;
}

.dgvs-faq-item[open] summary i {
    transform: rotate(180deg);
}

.dgvs-faq-answer {
    padding: 0 17px 16px;
}

.dgvs-faq-answer p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 640px) {
    .dgvs-audience {
        grid-template-columns: 1fr;
    }

    .dgvs-materials {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Seminar-only sections on the event-detail page (gated by $isSeminar)
   ===================================================================== */
.dg-evd-seminar-extras {
    padding: 24px 0 4px;
    border-top: 1px solid #E5E7EB;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.dg-evd-audience h3,
.dg-evd-materials h3 {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px;
}

.dg-evd-aud-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.dg-evd-aud-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.dg-evd-aud-ic {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #EFF6FF;
    color: #2563EB;
}

.dg-evd-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dg-evd-info-card {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 18px 18px 16px;
    background: #fff;
}

.dg-evd-info-card h4 {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    margin: 12px 0 7px;
}

.dg-evd-info-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

.dg-evd-info-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.dg-evd-info-card.info-cert .dg-evd-info-ic {
    background: #EDE9FE;
    color: #6D28D9;
}

.dg-evd-info-card.info-replay .dg-evd-info-ic {
    background: #FEF3C7;
    color: #B45309;
}

.dg-evd-mat-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
    margin: -4px 0 14px;
}

.dg-evd-mat-note i {
    color: #2563EB;
}

.dg-evd-mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.dg-evd-mat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 11px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}

a.dg-evd-mat:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .1);
}

.dg-evd-mat.is-locked {
    background: #F8FAFC;
    opacity: .82;
}

.dg-evd-mat strong {
    flex: 1;
    font-size: 13.5px;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-evd-mat-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 17px;
}

.dg-evd-mat-dl {
    color: #94A3B8;
}

a.dg-evd-mat:hover .dg-evd-mat-dl {
    color: #2563EB;
}

@media (max-width: 720px) {
    .dg-evd-info-cards {
        grid-template-columns: 1fr;
    }

    .dg-evd-aud-list {
        grid-template-columns: 1fr;
    }

    .dg-evd-mat-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Seminar detail page — refined to match the reference design
   ===================================================================== */

/* ---- Section heading icon chip ---- */
.dgvs-h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dgvs-h2-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 14px;
}

.dgvs-h2-ic.is-violet {
    background: #EDE9FE;
    color: #6D28D9;
}

.dgvs-h2-ic.is-green {
    background: #DCFCE7;
    color: #16A34A;
}

/* ---- Hero: rating + registered ---- */
.dgvs-detail-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 4px 0 2px;
}

.dgvs-detail-stats .dgvs-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #475569;
}

.dgvs-detail-stats .dgvs-stat strong {
    color: #0F172A;
    font-weight: 800;
}

.dgvs-detail-stats .dgvs-stat i {
    color: #94A3B8;
}

.dgvs-detail-stats .dgvs-stat.is-rating i {
    color: #F59E0B;
}

.dgvs-detail-stats .dgvs-stat a {
    color: #2563EB;
}

/* ---- Hero: countdown + save + share ---- */
.dgvs-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 6px;
}

.dgvs-countdown {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #EA580C;
    font-weight: 700;
    font-size: 14px;
    margin-right: 4px;
}

.dgvs-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #334155;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
}

.dgvs-chip-btn:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.dgvs-chip-btn.is-saved {
    color: #2563EB;
    border-color: #BFDBFE;
    background: #EFF6FF;
}

/* ---- Hero: hosted by + organized by ---- */
.dgvs-detail-people {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid #EEF2F6;
}

.dgvs-person {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dgvs-person>.dgvs-person-link {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}

.dgvs-person img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #E5E7EB;
    flex: none;
}

.dgvs-person>div span,
.dgvs-person-link>div span {
    display: block;
    font-size: 11.5px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.dgvs-person>div strong,
.dgvs-person-link>div strong {
    display: block;
    font-size: 14px;
    color: #0F172A;
}

.dgvs-person>div em,
.dgvs-person-link>div em {
    font-style: normal;
    font-size: 12.5px;
    color: #64748B;
}

.dgvs-verified {
    color: #2563EB;
    font-size: 13px;
}

/* ---- 3-column info row (Certificate / Replay / Materials) ---- */
.dgvs-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 22px 0;
}

.dgvs-info-title {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    margin: 12px 0 8px;
}

.dgvs-info-ic.info-mat {
    background: #DBEAFE;
    color: #2563EB;
}

/* Materials list (inside the 3-col info card) */
.dgvs-mat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.dgvs-mat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 1px solid #EEF2F6;
    border-radius: 10px;
    background: #F8FAFC;
    text-decoration: none;
    color: inherit;
}

a.dgvs-mat:hover {
    border-color: #BFDBFE;
    background: #EFF6FF;
}

.dgvs-mat.is-locked {
    opacity: .75;
}

.dgvs-mat-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: #FEE2E2;
    color: #DC2626;
}

.dgvs-mat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dgvs-mat-body strong {
    font-size: 13px;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgvs-mat-body span {
    font-size: 11.5px;
    color: #94A3B8;
}

.dgvs-mat-dl {
    font-size: 12.5px;
    font-weight: 700;
    color: #2563EB;
    white-space: nowrap;
}

/* ---- Featured speaker ---- */
.dgvs-speakers-section {
    margin: 22px 0;
}

.dgvs-host-heading {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px;
}

/* Shared host bits */
.dgvs-host-photo {
    flex: none;
}

.dgvs-host-name {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 2px;
}

.dgvs-host-role {
    color: #2563EB;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

/* ===== Single featured host — rich horizontal card ===== */
.dgvs-host-feature {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 26px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #F8FAFC;
}

.dgvs-host-feature .dgvs-host-photo img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
}

.dgvs-host-feature .dgvs-host-body {
    flex: 1;
    min-width: 0;
}

.dgvs-host-feature .dgvs-host-role {
    margin-bottom: 12px;
}

.dgvs-host-bio {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.dgvs-host-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dgvs-host-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

.dgvs-host-highlights li i {
    color: #2563EB;
    font-size: 15px;
    flex: none;
    margin-top: 2px;
}

.dgvs-host-feature .dgvs-host-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
}

.dgvs-host-feature .dgvs-host-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

.dgvs-host-feature .dgvs-host-links a:hover {
    text-decoration: underline;
}

/* ===== Multiple hosts — uniform, equal-height grid (3 per row) ===== */
.dgvs-host-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dgvs-host-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 18px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #F8FAFC;
}

.dgvs-host-tile .dgvs-host-photo img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
    margin-bottom: 12px;
}

.dgvs-host-tile .dgvs-host-name {
    font-size: 17px;
}

.dgvs-host-tile .dgvs-host-role {
    font-size: 13px;
    margin-top: 3px;
}

.dgvs-host-lead {
    display: inline-block;
    margin-top: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #2563EB;
    background: #EFF6FF;
    padding: 3px 11px;
    border-radius: 20px;
}

.dgvs-host-tile .dgvs-host-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
}

.dgvs-host-tile .dgvs-host-links a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E2E8F0;
    display: grid;
    place-items: center;
    color: #2563EB;
    font-size: 14px;
    text-decoration: none;
}

.dgvs-host-tile .dgvs-host-links a:hover {
    background: #EFF6FF;
    border-color: #BFDBFE;
}

@media (max-width: 900px) {
    .dgvs-host-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .dgvs-host-grid {
        grid-template-columns: 1fr;
    }

    .dgvs-host-feature {
        flex-direction: column;
        text-align: center;
    }

    .dgvs-host-feature .dgvs-host-highlights {
        width: fit-content;
        margin: 0 auto;
        text-align: left;
    }

    .dgvs-host-feature .dgvs-host-links {
        justify-content: center;
    }
}

/* ---- Sidebar: agenda box ---- */
.dgvs-agenda-box .dgvs-agenda {
    margin-top: 6px;
}

.dgvs-access-head {
    margin-top: 18px;
}

/* ---- Sidebar: "Can't attend live?" CTA ---- */
.dgvs-cta-box {
    background: linear-gradient(160deg, #2563EB 0%, #1E40AF 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: #fff;
}

.dgvs-cta-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-size: 22px;
}

.dgvs-cta-box strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
}

.dgvs-cta-box p {
    font-size: 13.5px;
    opacity: .9;
    margin: 6px 0 16px;
    line-height: 1.5;
}

.dekogo-page a.dgvs-cta-btn,
.dgvs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1D4ED8;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: 11px;
    text-decoration: none;
}

.dekogo-page a.dgvs-cta-btn:hover,
.dgvs-cta-btn:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

/* ---- Sidebar: share this seminar ---- */
.dgvs-share-box {
    text-align: center;
}

.dgvs-share-title {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px;
}

.dgvs-share-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dekogo-page a.dgvs-share-btn,
.dgvs-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: transform .12s, filter .12s;
}

.dekogo-page a.dgvs-share-btn:hover {
    color: #fff;
}

.dgvs-share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.dgvs-share-btn.is-fb {
    background: #1877F2;
}

.dgvs-share-btn.is-tw {
    background: #0F172A;
}

.dgvs-share-btn.is-in {
    background: #0A66C2;
}

.dgvs-share-btn.is-link {
    background: #64748B;
}

/* ---- More upcoming seminars ---- */
.dgvs-more {
    margin: 34px 0 10px;
}

.dgvs-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dgvs-more-head .dgvs-h2 {
    margin: 0;
}

.dgvs-more-all {
    font-size: 14px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    white-space: nowrap;
}

.dgvs-more-all:hover {
    text-decoration: underline;
}

.dgvs-up-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dgvs-up-card {
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}

.dgvs-up-card:hover {
    box-shadow: 0 10px 26px rgba(16, 24, 40, .12);
    transform: translateY(-2px);
}

.dgvs-up-media {
    position: relative;
}

.dgvs-up-media img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.dgvs-up-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 4px 9px;
    border-radius: 6px;
    color: #fff;
}

.dgvs-up-badge.is-live {
    background: #DC2626;
}

.dgvs-up-badge.is-cert {
    background: #0F172A;
}

.dgvs-up-badge.is-replay {
    background: #2563EB;
}

.dgvs-up-badge.is-free {
    background: #16A34A;
}

.dgvs-up-body {
    padding: 13px 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.dgvs-up-body strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.dgvs-up-org {
    font-size: 12.5px;
    color: #64748B;
}

.dgvs-up-foot {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
}

.dgvs-up-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748B;
}

.dgvs-up-foot i {
    color: #2563EB;
}

.dgvs-up-foot .dgvs-up-price {
    margin-left: auto;
    font-weight: 800;
    color: #0F172A;
    font-size: 14px;
}

@media (max-width: 1080px) {
    .dgvs-up-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .dgvs-three {
        grid-template-columns: 1fr;
    }

    .dgvs-speaker {
        flex-direction: column;
    }

    .dgvs-speaker-photo img {
        width: 96px;
        height: 96px;
    }
}

@media (max-width: 560px) {
    .dgvs-up-grid {
        grid-template-columns: 1fr;
    }

    .dgvs-detail-people {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================================
   9.2 Virtual Seminar card enrichments — optional blocks on the
   shared .dg-event-card (only render when the seminar mapping
   passes the data; regular events are unaffected).
   ============================================================ */
/* Speaker photo — circular avatar on the media */
.dg-event-media .dg-event-speaker {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(16, 24, 40, .25);
    background: #EEF2F7;
}

/* Feature badges: Live Now / Certificate / Replay */
.dg-event-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.dg-feat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

.dg-feat i {
    font-size: 9px;
}

.dg-feat-live {
    background: #FEE2E2;
    color: #DC2626;
}

.dg-feat-live i {
    animation: dgFeatPulse 1.4s infinite;
}

.dg-feat-cert {
    background: #EDE9FE;
    color: #7C3AED;
}

.dg-feat-replay {
    background: #FEF3C7;
    color: #B45309;
}

@keyframes dgFeatPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

/* Duration · registered · language */
.dg-event-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 10px;
}

.dg-event-subs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #64748B;
}

.dg-event-subs i {
    color: #94A3B8;
    font-size: 11px;
    width: 13px;
    text-align: center;
}

/* =====================================================================
   §20 MOBILE REQUIREMENTS — enhancement layer
   Sticky CTA bar · 44px touch targets · larger steppers · scannable QR
   · swipe gallery · readable text. Kept at the end so it wins the cascade.
   ===================================================================== */

/* ---- Sticky mobile CTA bar (rendered by partials/_mobile_cta) ---- */
.dg-mcta {
    display: none;
}

@media (max-width: 900px) {
    .dg-mcta {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #E5E9F0;
        box-shadow: 0 -4px 18px rgba(15, 23, 42, .12);
    }

    .dg-mcta-info {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        min-width: 0;
    }

    .dg-mcta-cap {
        font-size: 11.5px;
        color: #64748B;
    }

    .dg-mcta-price {
        font-size: 17px;
        font-weight: 800;
        color: #0F172A;
        white-space: nowrap;
    }

    .dg-mcta-btn {
        flex: 1 1 auto;
        min-height: 48px;
        padding: 12px 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        background: #4F46E5;
        border: none;
        border-radius: 12px;
        cursor: pointer;
    }

    .dg-mcta-btn:active {
        transform: translateY(1px);
    }

    /* keep the last content clear of the fixed bar */
    body.dg-has-mcta {
        padding-bottom: 84px;
    }
}

/* ---- 44px touch targets on phones/tablets ---- */
@media (max-width: 900px) {

    .dg-btn,
    .dg-event-btn,
    .dgvs-btn-primary,
    .dgvs-btn-outline,
    .dg-evd-buy-btn,
    .dgco2-bb-btn,
    .dgps2-wallet-btn,
    .dg-evd-yt-wallet {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* quantity steppers — bigger tap area */
    .dg-qty button,
    .dg-evd-qty button,
    .dgco2-tk-qty button,
    .dgco2-tk-stepper button {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .dg-qty input,
    .dg-evd-qty input,
    .dgco2-tk-qty input,
    .dgco2-tk-stepper input {
        height: 44px;
        min-width: 48px;
        font-size: 16px;
    }
}

/* DS button primitive: give the shared component a real touch target everywhere */
.ds-btn {
    min-height: 44px;
}

/* ---- Scannable QR on phones (≥220px) ---- */
@media (max-width: 900px) {

    .dgps2-ticket-qr img,
    .dgp-pass-qr img,
    .dg-evd-yt-qr img,
    .dgp-ticket-qr img,
    .dgo-feat-qr .dgo-qr-img img,
    img.ds-ticket-qr {
        width: 220px !important;
        height: 220px !important;
        max-width: 72vw;
    }
}

/* ---- No crowded text: lift tiny card/ticket meta on small phones ---- */
@media (max-width: 480px) {
    .dg-event-body h4 {
        font-size: 15px;
    }

    .dg-event-meta span,
    .dg-event-rate,
    .dg-event-meta {
        font-size: 12.5px;
    }

    .dgps2-qr-id,
    .dgps2-wallet-btn {
        font-size: 13px;
    }
}

/* ---- Swipe the event-detail hero gallery on touch ---- */
@media (max-width: 900px) {
    .dg-evd-hero {
        touch-action: pan-y;
    }

    .dg-evd-thumbs {
        max-width: calc(100% - 28px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .dg-evd-thumbs::-webkit-scrollbar {
        display: none;
    }

    .dg-evd-thumb {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Share popup — event / seminar share button (public/js/dekogo-cards.js)
   ========================================================================== */
.dg-share-modal { position: fixed; inset: 0; z-index: 12000; display: none; }
.dg-share-modal.is-open { display: block; }
body.dg-share-open { overflow: hidden; }

.dg-share-backdrop { position: absolute; inset: 0; background: rgba(15, 18, 26, .58); }

.dg-share-box {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 420px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 16px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.dg-share-x {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #98A2B3;
    cursor: pointer;
}

.dg-share-x:hover { color: #475467; }

.dg-share-title {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 800;
    color: #0F172A;
    text-align: center;
}

.dg-share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dekogo-page a.dg-share-net,
.dg-share-net {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 12px;
    border: 1px solid #EAECF0;
    color: #344054;
    font-size: 12px;
    text-decoration: none;
    transition: transform .12s, background .12s, color .12s;
}

.dekogo-page a.dg-share-net:hover,
.dg-share-net:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: #fff;
    text-decoration: none;
}

.dg-share-net i { font-size: 22px; }

.dg-share-net.dg-share-whatsapp:hover { background: #25D366; }
.dg-share-net.dg-share-facebook:hover { background: #1877F2; }
.dg-share-net.dg-share-twitter:hover  { background: #0F172A; }
.dg-share-net.dg-share-linkedin:hover { background: #0A66C2; }
.dg-share-net.dg-share-telegram:hover { background: #229ED9; }
.dg-share-net.dg-share-email:hover    { background: #667085; }

.dg-share-copy {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.dg-share-url {
    flex: 1;
    min-width: 0;
    border: 1px solid #EAECF0;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    color: #475467;
    background: #F9FAFB;
}

.dg-share-copy-btn {
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    background: #0F172A;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.dg-share-copy-btn:hover { background: #344054; }

@media (max-width: 480px) {
    .dg-share-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Deko Go — "View Tickets" page (.dgtv-*)
   Left: order header, a dark event pass + detail block per ticket.
   Right: order summary / details / help / share.
   The --dg-* palette is scoped to .dekogo-page, which this page's root
   is not, so the tokens used here are redeclared on .dgtv.
   ===================================================================== */
.dgtv {
    --dg-blue: #2563EB;
    --dg-text: #0F172A;
    --dg-muted: #6B7280;
    --dg-border: #E5E7EB;
    --dgtv-green: #16A34A;
    --dgtv-green-2: #15803D;
    --dgtv-line: #EEF1F6;
    background: #fff;
    padding: 22px 0 56px;
    color: var(--dg-text);
}
.dgtv-wrap {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
}

/* ---------- Top bar ---------- */
.dgtv-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.dgtv-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 700; color: var(--dgtv-green); text-decoration: none;
}
.dgtv-back:hover { color: var(--dgtv-green-2); }
.dgtv-topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.dgtv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border: 1px solid var(--dg-border); color: var(--dg-text);
    font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 10px;
    text-decoration: none; cursor: pointer; transition: .18s ease;
}
.dgtv-btn:hover { border-color: #CBD5E1; box-shadow: 0 3px 10px rgba(15, 23, 42, .07); color: var(--dg-text); }
.dgtv-btn:disabled { opacity: .6; cursor: default; }
.dgtv-btn-green { color: var(--dgtv-green); border-color: #BBF7D0; }
.dgtv-btn-green:hover { color: var(--dgtv-green-2); border-color: var(--dgtv-green); background: #F0FDF4; }
.dgtv-btn-block { width: 100%; }

/* ---------- Layout ---------- */
.dgtv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 26px; align-items: start; }
.dgtv-main, .dgtv-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Order header ---------- */
.dgtv-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 27px; font-weight: 800; margin: 0; }
.dgtv-head p { font-size: 13.5px; color: var(--dg-muted); margin: 6px 0 0; }
.dgtv-status {
    display: inline-flex; align-items: center; gap: 7px;
    background: #DCFCE7; color: var(--dgtv-green-2);
    font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
}
.dgtv-status i { font-size: 7px; }
.dgtv-status.is-past { background: #F1F5F9; color: #64748B; }
.dgtv-status.is-bare { background: transparent; padding: 0; font-size: 13.5px; }

/* ---------- The pass ---------- */
.dgtv-pass {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 268px;
    background: linear-gradient(120deg, #0A1A3C 0%, #0B1220 62%);
    border-radius: 14px; overflow: hidden; margin-top: 6px;
    box-shadow: 0 10px 30px rgba(10, 26, 60, .18);
}
.dgtv-pass.is-used { opacity: .85; }
/* Concentric glow, bottom-left. */
.dgtv-pass::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-radial-gradient(circle at 4% 116%, rgba(96, 165, 250, .14) 0 2px, rgba(96, 165, 250, 0) 2px 58px),
        radial-gradient(circle at 4% 116%, rgba(37, 99, 235, .5), rgba(37, 99, 235, 0) 58%);
}
.dgtv-pass-body {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px; padding: 28px 24px 28px 28px;
}

/* Left — identity */
.dgtv-pass-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dgtv-pass-brand { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; }
.dgtv-pass-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 8px; background: var(--dg-blue); font-size: 14px;
}
/* Legacy `i.fa.fa-star` in DekoWebAsset/css/style.css paints every star green —
   out-specify it so the pass mark stays white. */
.dgtv .dgtv-pass-mark i.fa { color: #fff; }
.dgtv-pass-brand strong {
    display: block; color: #fff; font-size: 13.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
}
.dgtv-pass-brand small {
    display: block; color: #94A3B8; font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
}
.dgtv-pass-title {
    color: #fff; font-size: 34px; line-height: 1.14; font-weight: 800;
    letter-spacing: -.01em; text-transform: uppercase; margin: 22px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    /* A long uppercase word ("ENTREPRENEURS") makes the h2's min-content width
       exceed its grid track, so the box itself spills over the Venue column and
       `overflow:hidden` never gets to clip it. `anywhere` lets the word break,
       which shrinks min-content back inside the track. */
    width: 100%; max-width: 100%; overflow-wrap: anywhere;
}
.dgtv-pass-chip {
    display: inline-block; margin-top: 20px; padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px;
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.dgtv-pass-host {
    margin-top: auto; padding-top: 22px;
    color: #94A3B8; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    max-width: 100%; overflow-wrap: anywhere;
}

/* Right — facts */
.dgtv-pass-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dgtv-pf + .dgtv-pf, .dgtv-pf-row { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; }
.dgtv-pf-k {
    display: flex; align-items: center; gap: 7px;
    color: #60A5FA; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.dgtv-pf > strong {
    display: block; margin-top: 6px; color: #fff;
    font-size: 19px; font-weight: 800; line-height: 1.25;
    min-width: 0; overflow-wrap: anywhere;
}
.dgtv-pf-sub { display: block; margin-top: 4px; color: #CBD5E1; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
/* minmax(0,…) — default `auto` minimums let a long value like "GENERAL
   ADMISSION" widen its track and push the row past the pass edge. */
.dgtv-pf-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr) minmax(0, .7fr); gap: 14px; }
.dgtv-pf-row .dgtv-pf { border-top: 0; padding-top: 0; min-width: 0; }
.dgtv-pf-row .dgtv-pf + .dgtv-pf { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 14px; }
.dgtv-pf-row .dgtv-pf > strong { font-size: 16px; }

/* Tear-off stub */
.dgtv-stub {
    position: relative; z-index: 1; margin: 12px 12px 12px 0;
    background: #fff; border-radius: 10px; padding: 14px 26px 14px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
}
.dgtv-stub::before {
    content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px;
    border-left: 2px dashed rgba(255, 255, 255, .35);
}
/* The two punched holes, painted as a strip centred on the dashed line. */
.dgtv-stub::after {
    content: ''; position: absolute; left: -22px; top: 0; bottom: 0; width: 20px;
    background:
        radial-gradient(circle 10px at 10px 0, #fff 98%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 10px at 10px 100%, #fff 98%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
}
.dgtv-stub-bar {
    display: block; width: 100%; padding: 7px 10px; border-radius: 6px;
    background: var(--dg-blue); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.dgtv-stub-bar.is-admit { margin-top: 3px; }
.dgtv-stub-bar.is-in { margin-top: 3px; background: var(--dgtv-green); }
.dgtv-stub-code { font-size: 15px; font-weight: 800; letter-spacing: .02em; word-break: break-all; }
.dgtv-stub-qr { line-height: 0; padding: 2px 0; }
.dgtv-stub-qr img { width: 122px; height: 122px; display: block; }
.dgtv-stub-vert {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl; max-height: 78%; overflow: hidden;
    color: #94A3B8; font-size: 9px; font-weight: 700; letter-spacing: .14em;
}
.dgtv-stub-pk { color: var(--dg-blue); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dgtv-stub-price { font-size: 24px; font-weight: 800; line-height: 1; }
.dgtv-stub-fine { color: #94A3B8; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- One ticket = one box ----------
   .dgtv-main is a flex column with a uniform 16px gap, so a bare detail section sat
   the same distance from the pass it describes as from the next pass down. With
   eleven tickets on the page that reads as an off-by-one list: the row under a pass
   looks like the caption for the pass under IT. The pass and its details now share a
   box, tight inside and well separated outside, and the ticket ID is printed in both
   halves so the pairing is checkable rather than inferred. */
.dgtv-list-h { font-size: 17px; font-weight: 800; margin: 6px 0 0; }
.dgtv-ticket {
    background: #fff; border: 1px solid var(--dgtv-line);
    border-radius: 18px; padding: 10px 10px 2px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
/* The perforation notches are punched with #fff circles, which is also this box's
   fill — the tear line keeps working inside the group. */
.dgtv-ticket .dgtv-pass { margin-top: 0; }

/* ---------- Per-ticket detail ---------- */
.dgtv-tk { padding: 4px 2px 8px; }
.dgtv-ticket .dgtv-tk { padding: 16px 12px 12px; }
.dgtv-tk h3 { font-size: 17px; font-weight: 800; margin: 10px 0 14px; }
/* The stub code, repeated beside the counter: the one value that says WHICH ticket
   this row is, matching the "Ticket ID" printed on the pass directly above. */
.dgtv-tk-id {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    border-radius: 999px; background: #F1F5F9; color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none;
    vertical-align: 1px; word-break: break-all;
}
.dgtv-tk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dgtv-tk-top strong { display: block; font-size: 17px; font-weight: 800; }
.dgtv-tk-top > div > span {
    display: block; margin-top: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
}
/* What the ticket includes beyond admission — days covered, package contents (Part 1 §2).
   Overrides the uppercase tracking above: "Includes Three-course dinner" is a sentence,
   not a label, and shouting it makes the card unreadable. */
.dgtv-tk-top > div > span.dgtv-tk-note {
    margin-top: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0F766E;
}
.dgtv-tk-note i { margin-right: 5px; opacity: .8; }
.dgtv-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #DCFCE7; color: var(--dgtv-green-2);
    font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.dgtv-badge.is-in { background: #DBEAFE; color: #1D4ED8; }
.dgtv-badge.is-past { background: #F1F5F9; color: #64748B; }

.dgtv-tk-meta {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    margin-top: 18px;
}
.dgtv-tk-meta > div { padding: 0 18px; }
.dgtv-tk-meta > div:first-child { padding-left: 0; }
.dgtv-tk-meta > div + div { border-left: 1px solid var(--dgtv-line); }
.dgtv-tk-k {
    display: block; margin-bottom: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94A3B8;
}
.dgtv-tk-v { display: flex; gap: 9px; font-size: 13.5px; color: #334155; word-break: break-word; }
.dgtv-tk-v i { color: #94A3B8; width: 14px; margin-top: 2px; flex: 0 0 auto; }
.dgtv-tk-v em { display: block; font-style: normal; color: var(--dg-muted); }

/* ---------- Cards ---------- */
.dgtv-card {
    background: #fff; border: 1px solid var(--dg-border);
    border-radius: 12px; padding: 18px 20px;
}
.dgtv-card h4 { font-size: 15.5px; font-weight: 800; margin: 0 0 14px; }
.dgtv-p { font-size: 13px; color: var(--dg-muted); margin: 0 0 14px; }
.dgtv-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--dgtv-green); text-decoration: none; }
.dgtv-link:hover { color: var(--dgtv-green-2); text-decoration: underline; }

.dgtv-email { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dgtv-email-l { display: flex; gap: 12px; align-items: flex-start; }
.dgtv-email-l > i { color: #64748B; font-size: 18px; margin-top: 2px; }
.dgtv-email-l strong { display: block; font-size: 14px; }
.dgtv-email-l span { font-size: 13px; color: var(--dg-muted); }

/* Important information — three columns, divided. */
.dgtv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgtv-steps li { display: flex; gap: 12px; padding: 0 18px; }
.dgtv-steps li:first-child { padding-left: 0; }
.dgtv-steps li + li { border-left: 1px solid var(--dgtv-line); }
.dgtv-steps i { color: #64748B; font-size: 15px; width: 18px; margin-top: 2px; flex: 0 0 auto; }
.dgtv-steps strong { display: block; font-size: 13.5px; }
.dgtv-steps span { font-size: 12.5px; color: var(--dg-muted); }

/* ---------- Sidebar ---------- */
.dgtv-box { background: #F8FAFC; border: 1px solid var(--dgtv-line); border-radius: 12px; padding: 18px 20px; }
.dgtv-box h4 { font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.dgtv-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 0; font-size: 13.5px; color: var(--dg-muted);
}
.dgtv-row > span:last-child { color: var(--dg-text); font-weight: 600; text-align: right; }
.dgtv-row.is-green > span:last-child { color: var(--dgtv-green); }
.dgtv-ico { display: inline-flex; align-items: center; gap: 7px; }
.dgtv-ico i { color: #94A3B8; }
.dgtv-grand {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 8px; padding-top: 14px; border-top: 1px solid #E2E8F0; font-size: 15px; font-weight: 700;
}
.dgtv-grand strong { font-size: 19px; }

.dgtv-share { display: flex; gap: 12px; flex-wrap: wrap; }
.dgtv-share a, .dgtv-share button {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--dg-border); background: #fff; color: var(--dg-text);
    font-size: 16px; cursor: pointer; transition: .18s ease; text-decoration: none;
}
.dgtv-share a:hover, .dgtv-share button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, .1); }
.dgtv-share .is-fb i { color: #1877F2; }
.dgtv-share .is-x i  { color: #0F172A; }
.dgtv-share .is-wa i { color: #25D366; }
.dgtv-share .is-link i { color: var(--dg-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .dgtv-cols { grid-template-columns: 1fr; }
    .dgtv-pass-title { font-size: 30px; }
}
@media (max-width: 900px) {
    /* Stack the pass; the perforation becomes a horizontal tear line. */
    .dgtv-pass, .dgtv-pass-body { grid-template-columns: 1fr; }
    .dgtv-pass-body { gap: 24px; padding: 26px 20px; }
    .dgtv-pass-host { padding-top: 16px; }
    .dgtv-stub { margin: 0 12px 12px; padding: 14px; }
    .dgtv-stub::before { left: 6px; right: 6px; top: -12px; bottom: auto; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .35); }
    .dgtv-stub::after {
        left: 0; right: 0; top: -22px; bottom: auto; width: auto; height: 20px;
        background:
            radial-gradient(circle 10px at 0 10px, #fff 98%, rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle 10px at 100% 10px, #fff 98%, rgba(255, 255, 255, 0) 100%);
        background-repeat: no-repeat;
    }
    .dgtv-stub-vert { display: none; }
    .dgtv-tk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
    .dgtv-tk-meta > div:nth-child(odd) { padding-left: 0; }
    .dgtv-tk-meta > div:nth-child(odd) { border-left: 0; }
    .dgtv-steps { grid-template-columns: 1fr; gap: 16px; }
    .dgtv-steps li { padding: 0; }
    .dgtv-steps li + li { border-left: 0; }
}
@media (max-width: 640px) {
    .dgtv-pass-title { font-size: 25px; }
    .dgtv-pf-row { grid-template-columns: 1fr; gap: 14px; }
    .dgtv-pf-row .dgtv-pf + .dgtv-pf { border-left: 0; padding-left: 0; }
    .dgtv-topbar-actions { width: 100%; }
    .dgtv-topbar-actions .dgtv-btn { flex: 1 1 auto; }
    .dgtv-tk-meta { grid-template-columns: 1fr; }
    .dgtv-tk-meta > div { padding: 0; border-left: 0; }
    .dgtv-email { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Part 1 §3 — what the customer accepts before paying.
   Replaces a single line of small print that claimed agreement was implied by
   buying. Each policy is ticked, and each is recorded with the order.
   ========================================================================== */
.dgco2-accept {
    margin: 18px 0 0;
    padding: 18px 22px;
    border: 1.5px solid #DBEAFE;
    border-radius: 16px;
    background: #fff;
}
.dgco2-accept-head {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
}
/* Two columns where there is room. Five stacked rows made a tall thin block that
   pushed the pay button off the fold; side by side they read as one short list. */
.dgco2-accept-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 4px 26px;
}
.dgco2-accept-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 7px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #334155;
    cursor: pointer;
}
/* An expanded policy is read across the whole width, not squeezed into one column. */
.dgco2-accept-row:has(.dgco2-accept-text:not([hidden])) { grid-column: 1 / -1; }
/* Sized and offset to line up with the first line of text rather than float
   against it — a checkbox that does not align reads as a rendering fault. */
.dgco2-accept-row input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #2563EB;
    cursor: pointer;
}
/* Ticked rows recede so the eye lands on what is still outstanding. */
.dgco2-accept-row:has(input:checked) { color: #64748B; }
.dgco2-accept-row:has(input:checked) strong { color: #475569; font-weight: 600; }
.dgco2-accept-row strong { font-weight: 700; color: #0F172A; }
.dgco2-accept-row a { color: #2563EB; text-decoration: underline; }

/* One affordance for both kinds — an <a> for a policy that lives on its own page and a
   <button> for one that expands in place. They rendered differently before, so the
   privacy row read "— read it" and the rest read "read it". */
.dgco2-accept-more {
    display: inline-block;
    margin-left: 4px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}
.dgco2-accept-more:hover { color: #1D4ED8; }
.dgco2-accept-text {
    display: block;
    margin-top: 6px;
    padding: 9px 11px;
    border-left: 3px solid #CBD5E1;
    background: #fff;
    border-radius: 0 8px 8px 0;
    font-style: normal;
    font-size: 12.5px;
    color: #475569;
}
.dgco2-accept-err {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #B91C1C;
}

/* Optional-field marker and hint text, used by the accessibility and referral
   fields — both optional, and both easy to mistake for required without this. */
.dgco2-opt { font-weight: 500; color: #94A3B8; }
.dgco2-hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #94A3B8;
}

@media (prefers-color-scheme: dark) {
    .dgco2-accept { border-color: #334155; background: #0F172A; }
    .dgco2-accept-row:has(input:checked) { color: #94A3B8; }
    .dgco2-accept-head, .dgco2-accept-row strong { color: #F1F5F9; }
    .dgco2-accept-row { color: #CBD5E1; }
    .dgco2-accept-text { background: #1E293B; border-left-color: #475569; color: #CBD5E1; }
}

/* ============================================================================
   Wallet pass buttons (Part 1 §5). Only rendered when Apple/Google credentials
   are configured — the previous buttons promised a pass that did not exist.
   ========================================================================== */
.dgtv-wallet { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.dgtv-wallet-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    border: 1px solid transparent; transition: opacity .15s, transform .05s;
}
.dgtv-wallet-btn:active { transform: translateY(1px); }
.dgtv-wallet-btn:hover { opacity: .88; text-decoration: none; }
/* Apple's guidance is a black badge; Google's is white with a border. Following
   each vendor's own convention so the buttons read as the real thing. */
.dgtv-wallet-btn.is-apple  { background: #000; color: #fff; }
.dgtv-wallet-btn.is-google { background: #fff; color: #3c4043; border-color: #dadce0; }
@media (prefers-color-scheme: dark) {
    .dgtv-wallet-btn.is-apple  { background: #1f2937; }
    .dgtv-wallet-btn.is-google { background: #202124; color: #e8eaed; border-color: #5f6368; }
}

/* ============================================================================
   Ticket page: getting there, and the organizer (Part 1 §6).
   Parking and accessibility lived only on the public event page; the organizer's
   contact details reached the email but never the dashboard.
   ========================================================================== */
.dgtv-help { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }
.dgtv-help + .dgtv-help { border-top: 1px solid #EEF2F7; }
.dgtv-help i { flex: 0 0 auto; margin-top: 3px; width: 16px; text-align: center; color: #0F766E; }
.dgtv-help strong { display: block; font-size: 13px; font-weight: 700; color: #0F172A; }
.dgtv-help p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: #64748B; }
.dgtv-org-name { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #0F172A; }
/* The phone and website sit under the primary email button, so they need air. */
.dgtv-box .dgtv-link + .dgtv-link { margin-top: 6px; }
@media (prefers-color-scheme: dark) {
    .dgtv-help + .dgtv-help { border-top-color: #1E293B; }
    .dgtv-help strong, .dgtv-org-name { color: #F1F5F9; }
    .dgtv-help p { color: #94A3B8; }
}


/* Waiting room on the join screen (Part 1 §9) — the specification's "identity check":
   a person looks at who is asking and admits them. */
.dgtv-wait {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 16px; padding: 14px 16px;
    background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 12px;
}
.dgtv-wait i { margin-top: 3px; color: #A16207; }
.dgtv-wait strong { display: block; font-size: 13.5px; color: #78350F; }
.dgtv-wait p { margin: 3px 0 0; font-size: 12.5px; color: #92400E; line-height: 1.55; }

/* "Signed in on another device" (Part 1 §10). The customer's own way out of a device
   clash — the refusal used to say "close one and try again" with nothing to click. */
.dgtv-devices {
    display: flex; gap: 16px; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 16px; padding: 15px 18px;
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px;
}
.dgtv-devices strong { display: block; font-size: 14px; color: #1E3A8A; }
.dgtv-devices p { margin: 3px 0 0; font-size: 12.5px; color: #1D4ED8; }
.dgtv-devices form { margin: 0; }

/* Cancelled or postponed, on the customer's own ticket (Part 1 §6). The ticket used to
   vanish from their dashboard entirely at exactly the moment they needed it. */
.dgtv-called-off {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 0 0 20px; padding: 16px 20px; border-radius: 12px; border: 1px solid;
}
.dgtv-called-off i { margin-top: 3px; font-size: 18px; }
.dgtv-called-off strong { display: block; font-size: 15px; }
.dgtv-called-off p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.dgtv-called-off-policy { margin-top: 8px !important; font-size: 12.5px !important; }
.dgtv-called-off.is-cancelled { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.dgtv-called-off.is-cancelled i, .dgtv-called-off.is-cancelled strong { color: #B91C1C; }
.dgtv-called-off.is-postponed { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.dgtv-called-off.is-postponed i, .dgtv-called-off.is-postponed strong { color: #A16207; }

/* =====================================================================
   Deko Go — transferred ticket, recipient's copy (.dgtv-solo)
   resources/views/website/dekogo/transfer-ticket.blade.php

   The page reuses the .dgtv- pass wholesale; only the guest-specific parts
   are defined here. Every rule is either .dgtv-solo itself or a
   .dgtv-solo- prefix, so nothing here can reach the signed-in ticket page.
   ===================================================================== */

/* One ticket, not a dashboard: .dgtv-wrap runs to 1700px, which strands a
   single pass in the middle of an empty page on a desktop. */
.dgtv-solo .dgtv-wrap {
    max-width: 1080px;
}

.dgtv-solo .dgtv-head {
    margin-bottom: 4px;
}

.dgtv-solo-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dgtv-green);
}

.dgtv-solo-flash {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #065F46;
}

.dgtv-solo-flash i {
    margin-top: 2px;
    color: #059669;
}

.dgtv-solo-flash.is-error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.dgtv-solo-flash.is-error i {
    color: #DC2626;
}

.dgtv-solo-card a {
    color: var(--dgtv-green);
    font-weight: 600;
}

/* Stands in for the QR inside the stub, so a dead ticket keeps the pass's
   shape instead of collapsing it. */
.dgtv-solo-void {
    display: block;
    padding: 10px 8px;
    color: #B91C1C;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.dgtv-solo-void i {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    color: #DC2626;
}

/* ---- what a guest needs after the ticket ---- */
.dgtv-solo-after {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.dgtv-solo-card {
    background: #fff;
    border: 1px solid var(--dgtv-line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.dgtv-solo-card h3 {
    margin: 0 0 10px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--dg-text);
}

.dgtv-solo-card h3 i {
    margin-right: 7px;
    color: var(--dgtv-green);
}

/* list-style restated on the li as well as the ul: the theme resets li
   directly, and a marker inherited from the ul loses to it. */
.dgtv-solo-card ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc outside;
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

.dgtv-solo-card li {
    list-style: disc outside;
    margin-bottom: 5px;
}

.dgtv-solo-card li:last-child {
    margin-bottom: 0;
}

.dgtv-solo-card p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

.dgtv-solo-foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: #94A3B8;
}

.dgtv-solo-foot a {
    color: var(--dgtv-green);
    font-weight: 600;
}

@media (max-width: 640px) {
    .dgtv-solo .dgtv-topbar {
        margin-bottom: 16px;
    }

    .dgtv-solo .dgtv-btn {
        width: 100%;
    }
}

/* Printed, this page IS the ticket — everything that is not the pass is noise
   on the paper somebody hands to a door.

   The body:has(.dgtv-solo) guard is what keeps this page-specific: the first
   selector reaches outside the component to drop the site chrome, so it must
   only match on a page that actually contains this ticket. Browsers without
   :has() drop the rule and print the nav, which is merely the old behaviour. */
@media print {
    /* `body > main >`, not a loose `main >`: this component is itself a <main>
       nested inside the layout's, so an unanchored descendant selector also
       matched its own .dgtv-wrap and printed a blank sheet. */
    body:has(.dgtv-solo) > .loader-overlay,
    body:has(.dgtv-solo) > main > *:not(.dgtv-solo) {
        display: none !important;
    }

    .dgtv-solo .dgtv-topbar,
    .dgtv-solo-flash,
    .dgtv-solo-after,
    .dgtv-solo-foot {
        display: none !important;
    }

    .dgtv-solo .dgtv-pass,
    .dgtv-solo .dgtv-ticket {
        box-shadow: none;
    }

    /* The pass is a dark gradient with white type — without this it prints as
       white-on-white and the stub is the only thing on the page. */
    .dgtv-solo .dgtv-pass,
    .dgtv-solo .dgtv-pass * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ==========================================================================
   Recurring seminar — session picker
   A series runs on many dates, so the booking card asks which one before it
   asks which ticket. Styled to sit with .dgvs-access-opt rather than as a bare
   browser <select>, which read as an unstyled control dropped into the card.
   ========================================================================== */

.dgvs-datepick {
    margin: 0 0 22px;
}

.dgvs-datepick-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #ffffff;
    padding: 0 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dgvs-datepick-field:hover {
    border-color: #CBD5E1;
}

/* Matches the focus ring the access options use when chosen. */
.dgvs-datepick-field:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 1px #2563EB;
}

.dgvs-datepick-field > .fa-calendar-o {
    color: #2563EB;
    font-size: 16px;
    flex: 0 0 auto;
}

.dgvs-datepick-field select {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 15px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
    /* The native arrow sits too far out on a padded field; a caret is drawn
       instead so it lines up with the icon on the left. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dgvs-datepick-caret {
    color: #64748B;
    font-size: 18px;
    pointer-events: none;
    flex: 0 0 auto;
}

.dgvs-datepick-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 2px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748B;
}

.dgvs-datepick-note i {
    color: #94A3B8;
    font-size: 13px;
}

/* The line in "Event Date & Time" that echoes the chosen session. */
.dgvs-when-list li.dgvs-joining {
    color: #0F172A;
}

.dgvs-when-list li.dgvs-joining i {
    color: #2563EB;
}

.dgvs-when-list li.dgvs-joining strong {
    font-weight: 800;
}

@media (max-width: 480px) {
    .dgvs-datepick-field select { padding: 13px 8px; font-size: 14px; }
}

/* ==========================================================================
   Recurring event — date picker in the order card
   Matches .dgvs-datepick on the seminar page so the same choice looks the same
   in both places.
   ========================================================================== */

.dg-evd-datepick {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #E2E8F0;
}

.dg-evd-datepick > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.dg-evd-datepick-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dg-evd-datepick-field:hover { border-color: #CBD5E1; }

.dg-evd-datepick-field:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 1px #2563EB;
}

.dg-evd-datepick-field > .fa-calendar-o {
    color: #2563EB;
    font-size: 15px;
    flex: 0 0 auto;
}

.dg-evd-datepick-field select {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 13px 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
    /* Drawn caret instead of the native arrow, which sits too far out on a
       padded field. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dg-evd-datepick-caret {
    color: #64748B;
    font-size: 17px;
    pointer-events: none;
    flex: 0 0 auto;
}

.dg-evd-datepick-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 9px 2px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
}

.dg-evd-datepick-note i { color: #94A3B8; font-size: 12.5px; }

/* Saved-deal thumbnails: a placeholder sits behind the photo, so a deal with no
   image — or one whose file is gone (the <img> removes itself on error) —
   shows a ticket tile instead of broken-image alt text. */
.dgo-mini-img,
.dgo-deal-img {
    background: linear-gradient(135deg, #EEF2FF 0%, #FCE7F3 100%);
}
.dgo-mini-img::after,
.dgo-deal-img::after {
    content: "\f145"; /* fa-ticket */
    font-family: FontAwesome;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #A5B4FC;
    z-index: 0;
}
.dgo-deal-img::after { font-size: 20px; }
.dgo-mini-img img,
.dgo-deal-img img { position: relative; z-index: 1; }
.dgo-deal-badge { z-index: 2; }
.dgo-mini-img .dgo-mini-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    margin: 0;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

/* Deko Go Pass — plan cards are selectable (script in deko-go-pass.blade.php
   moves .is-featured to the clicked card). */
.dgpass-tier {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.dgpass-tier:focus { outline: none; }
.dgpass-tier:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.dgpass-tier.is-featured:focus-visible { box-shadow: 0 0 0 3px rgba(245, 158, 11, .55), 0 28px 55px -22px rgba(29, 78, 216, .7); }

/* Plan buttons: outline and solid share one size so switching the selected
   card does not resize its button, and the outline text stays blue against
   the site-wide link colour. */
.dgpass-tier .dgvs-btn-outline.block,
.dgpass-tier .dgvs-btn-primary.block {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
}
.dgpass-tier .dgvs-btn-outline.block {
    border-color: #2563EB;
    color: #2563EB !important;
}
.dgpass-tier .dgvs-btn-outline.block:hover {
    background: #EFF6FF;
    color: #1D4ED8 !important;
}