/* /Components/Admin/DistributionLogger.razor.rz.scp.css */
/* Phone-first: this page is worked one-handed while standing up. Everything here is
   layout and hit-target sizing - colour comes from Bootstrap's semantic utilities so the
   brand tokens stay the single source of truth. */

.position-banner[b-q2dltsc5ix] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

/* Minimum comfortable thumb target. */
.btn-tap[b-q2dltsc5ix] {
    min-height: 2.75rem;
}

.title-card[b-q2dltsc5ix] {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Leaves room for the cart bar so the last row of titles is never trapped underneath it. */
.title-grid[b-q2dltsc5ix] {
    padding-bottom: 22rem;
}

/* Sell and Log are peers, each a full half of the width: the grid and the feed both want the
   whole screen on a phone, so they take turns rather than competing. */
.session-tabs .nav-link[b-q2dltsc5ix] {
    text-align: center;
}

/* text-truncate on the child only works if the flex item is allowed to shrink. */
.entry-list .min-width-0[b-q2dltsc5ix] {
    min-width: 0;
}

.entry-row:last-child[b-q2dltsc5ix] {
    border-bottom: 0 !important;
}

.cart-bar[b-q2dltsc5ix] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem 0 1rem;
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.08);
}
/* /Components/Admin/QrCodeEdit.razor.rz.scp.css */
/* A chequerboard behind the preview, so a transparent code looks transparent rather than
   white-on-white. Plain greys rather than tokens on purpose: this is a stand-in for "no
   background at all", and tinting it brand colours would misrepresent what downloads. */
.qr-preview[b-3jytmww9iw] {
    display: inline-block;
    padding: 0.75rem;
    border: 1px solid var(--divider);
    border-radius: 8px;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #eeeeee 25%, transparent 25%),
        linear-gradient(-45deg, #eeeeee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eeeeee 75%),
        linear-gradient(-45deg, transparent 75%, #eeeeee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* /Components/Admin/QrCodes.razor.rz.scp.css */
/* The list thumbnail. A QR code with a transparent or pale background needs an edge, or the
   cell reads as an empty gap on a cream row. */
.qr-thumb[b-duia82wv08] {
    border: 1px solid var(--divider);
    border-radius: 4px;
    background: #ffffff;
    padding: 2px;
}
/* /Components/Admin/Shop.razor.rz.scp.css */
/* The counter is worked standing up, often on a phone, so the running sale is pinned to the
   bottom of the screen the same way the distribution logger pins its cart. Layout and hit
   targets only - colour stays with Bootstrap's semantic utilities and the brand tokens. */

.cart-bar[b-c76ivl1qzg] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem 0 1rem;
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.08);
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.account-shell[b-ha7orrfyql] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-page);
    padding: 2rem 1rem;
}

.account-card[b-ha7orrfyql] {
    width: 100%;
    max-width: 440px;
    background: var(--surface-card);
    border-radius: var(--radius-2xl);
    border-top: 4px solid var(--brand-accent);
    box-shadow: var(--shadow-card);
    padding: 2.5rem 2rem;
}

.account-logo[b-ha7orrfyql] {
    max-height: 70px;
    max-width: 100%;
}
/* /Components/Layout/ConsoleLayout.razor.rz.scp.css */
/* The sidebar shell. The topbar it sits under is shared with StoreLayout, so those rules
   live in wwwroot/css/console.css instead - a scoped sheet only ever stamps the one
   component that declares it.

   Structure only; every colour comes from a token redeclared on .console. */


/* ---- Body: sidebar + main ---- */

.console-body[b-za2juppb0k] {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    min-height: 0;
}

.console-sidebar[b-za2juppb0k] {
    background: var(--surface-page);
}

.console-sidebar-body[b-za2juppb0k] {
    padding: 1rem 0.75rem;
    /* Bootstrap sets `.offcanvas-lg .offcanvas-body { display: flex }` from lg up, which
       would lay the nav groups out side by side. Stack them instead. */
    flex-direction: column;
}

.console-main[b-za2juppb0k] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--console-topbar-h));
}

.console-content[b-za2juppb0k] {
    flex: 1 0 auto;
    padding: 1.5rem 1rem 2.5rem;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
}

.console-footer[b-za2juppb0k] {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid var(--divider);
    font-size: 0.8125rem;
    text-align: center;
}

.console-footer a[b-za2juppb0k] {
    color: var(--text-muted);
    text-decoration: none;
}

.console-footer a:hover[b-za2juppb0k] {
    text-decoration: underline;
}

/* ---- lg and up: the drawer becomes a fixed column ---- */

@media (min-width: 992px) {
    .console-sidebar[b-za2juppb0k] {
        width: var(--console-sidebar-w);
        flex: 0 0 var(--console-sidebar-w);
        position: sticky;
        top: var(--console-topbar-h);
        height: calc(100vh - var(--console-topbar-h));
        overflow-y: auto;
        border-right: 1px solid var(--divider);
    }

    .console-sidebar-body[b-za2juppb0k] {
        padding: 1.25rem 0.75rem;
    }

    .console-content[b-za2juppb0k] {
        padding: 2rem 2rem 3rem;
    }
}
/* /Components/Layout/ConsoleNav.razor.rz.scp.css */
/* Scoped to ConsoleNav, not ConsoleLayout: Blazor stamps its scope id on the declaring
   component only, so these cannot live in ConsoleLayout.razor.css.

   ::deep on every rule that targets the link itself. <NavLink> is a *component*, so the <a>
   it renders is in its own (empty) scope and never receives this file's b- attribute - a
   plain `.console-nav-link { }` compiles to `.console-nav-link[b-xxx]` and matches nothing.
   The icon rules need no ::deep, because child content is compiled in this component and
   does carry the attribute. PublicLayout.razor.css works around the same thing for its
   navbar links.

   Structure and weight only - every colour resolves from a token. */

.console-nav-group + .console-nav-group[b-bz31zoz56s] {
    margin-top: 1.75rem;
}

.console-nav-heading[b-bz31zoz56s] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 0 0.75rem;
    margin: 0 0 0.5rem;
}

.console-nav-list[b-bz31zoz56s] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.console-nav-list li + li[b-bz31zoz56s] {
    margin-top: 2px;
}

.console-nav-list[b-bz31zoz56s]  .console-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    text-decoration: none;
    line-height: 1.35;
    min-height: 2.25rem;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.console-nav-list[b-bz31zoz56s]  .console-nav-link:hover {
    background: var(--surface-well);
    color: var(--text-heading);
    text-decoration: none;
}

/* The active item carries a left rule as well as a tint: on a long list the tint alone is
   easy to lose, and the rule reads at a glance. */
.console-nav-list[b-bz31zoz56s]  .console-nav-link.active {
    background: var(--tint-accent-soft);
    color: var(--brand-accent);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--brand-accent);
}

.console-nav-icon[b-bz31zoz56s] {
    width: 1.125rem;
    flex: 0 0 1.125rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.console-nav-link:hover .console-nav-icon[b-bz31zoz56s],
.console-nav-link.active .console-nav-icon[b-bz31zoz56s] {
    color: inherit;
}

/* Comfortable thumb targets in the drawer. */
@media (max-width: 991.98px) {
    .console-nav-list[b-bz31zoz56s]  .console-nav-link {
        padding: 0.6875rem 0.75rem;
        font-size: 0.9375rem;
        min-height: 2.75rem;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* App shell: sticky footer layout */
.page-shell[b-8wh5bg09zc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-content[b-8wh5bg09zc] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Navigation */
.nav-actions[b-8wh5bg09zc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The gold pill against the purple bar. .btn-brand:hover swaps to a deep-purple fill, which
   on this bar would all but disappear, so the hover state is brightened here instead. */
.nav-donate[b-8wh5bg09zc] {
    white-space: nowrap;
}

.nav-account[b-8wh5bg09zc] {
    display: inline-flex;
    align-items: center;
    color: var(--on-dark-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.nav-account:hover[b-8wh5bg09zc],
.nav-account:focus-visible[b-8wh5bg09zc] {
    color: var(--brand-accent-bright);
}

.nav-donate:hover[b-8wh5bg09zc],
.nav-donate:focus-visible[b-8wh5bg09zc] {
    background: var(--brand-accent-bright);
    color: var(--brand-primary-strong);
}

.main-nav[b-8wh5bg09zc] {
    background: var(--purple-700);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding: 0.25rem 0;
    --bs-navbar-hover-color: var(--yellow-400);
    --bs-navbar-active-color: var(--yellow-400);
}

.main-nav[b-8wh5bg09zc]  .nav-link.active {
    font-weight: 600;
}

/* The bar is sticky, so its height is a permanent tax on the viewport. A cap, not a fixed
   height: below lg the wordmark (3.75:1) is the one elastic thing on the row, so both
   maxima bind - the height caps it on a roomy phone, the width takes over on a narrow one
   and the aspect ratio follows. */
.brand-logo[b-8wh5bg09zc] {
    height: auto;
    width: auto;
    max-height: 44px;
    max-width: 100%;
}

@media (min-width: 576px) {
    .brand-logo[b-8wh5bg09zc] {
        max-height: 60px;
    }
}

.navbar-content-wrapper[b-8wh5bg09zc] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Below lg the bar is one row - brand at the left, actions at the right - with the
   collapsed menu on a row of its own underneath. At the natural logo size the brand and
   the three actions wanted 382px, which is more than a 375px phone has, so the row wrapped
   and the sticky bar stood at double height on exactly the screens that can least afford
   it. flex-basis 0 takes the brand out of the line-breaking calculation, so the wordmark
   scales down to whatever is left over instead of pushing the actions onto a second row.
   Nothing in .nav-actions may shrink: Donate, the account link and the toggler are all
   tap targets. */
@media (max-width: 991.98px) {
    .main-nav .navbar-brand[b-8wh5bg09zc] {
        flex: 1 1 0;
        min-width: 0;
        /* A grown item leaves space-between nothing to distribute, so this margin is the
           only thing keeping the wordmark off the account icon. Down from Bootstrap's
           1rem: every pixel here comes straight off the logo. */
        margin-right: 0.75rem;
    }

    .nav-actions[b-8wh5bg09zc] {
        flex: 0 0 auto;
    }
}

.main-nav .navbar-toggler[b-8wh5bg09zc] {
    border: none;
    padding: 0.25rem 0.5rem;
}

.main-nav .navbar-collapse[b-8wh5bg09zc] {
    width: 100%;
    margin-top: 1rem;
    order: 3;
    flex-basis: 100%;
}

@media (min-width: 992px) {
    /* Everything else sits at order 0, so this alone moves the pill to the end of the row:
       brand, links, Donate. */
    .nav-actions[b-8wh5bg09zc] {
        order: 1;
        margin-left: 1.5rem;
    }

    .main-nav[b-8wh5bg09zc] {
        padding: 0.5rem 0;
    }

    /* Back to a fixed height from lg up. The elastic wordmark is a phone measure; letting
       it shrink here would hand the width to the nav links instead, at a breakpoint where
       the row is already tight. */
    .brand-logo[b-8wh5bg09zc] {
        height: 70px;
        width: auto;
        max-height: none;
        max-width: none;
    }

    .navbar-content-wrapper[b-8wh5bg09zc] {
        justify-content: center;
        width: auto;
        flex-wrap: nowrap;
        margin: 0 auto;
    }

    .main-nav .navbar-brand[b-8wh5bg09zc] {
        margin-right: 5rem;
    }

    .main-nav .navbar-collapse[b-8wh5bg09zc] {
        margin-top: 0;
        width: auto;
        flex-basis: auto;
        order: unset;
    }
}

/* Footer */
.footer[b-8wh5bg09zc] {
    flex-shrink: 0;
    width: 100%;
    background: var(--purple-700);
}

.footer[b-8wh5bg09zc]  .footer-social a {
    color: white;
}

/* The footer account link. The old .staff-link was a 35%-opacity padlock, which was fine as
   a private staff door and useless as the only sign-in entry point on the whole site. */
/* /Components/Layout/StoreLayout.razor.rz.scp.css */
/* Structure only; every colour resolves from a token redeclared on .console. */

.store-nav[b-w5ta3njblv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 1.5rem;
}

/* ::deep for the same reason ConsoleNav needs it: <NavLink> is a component, so the <a> it
   renders never receives this file's scope attribute. */
.store-nav[b-w5ta3njblv]  .store-nav-link {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}

.store-nav[b-w5ta3njblv]  .store-nav-link:hover {
    background: var(--surface-well);
    color: var(--text-body);
    text-decoration: none;
}

.store-nav[b-w5ta3njblv]  .store-nav-link.active {
    background: var(--tint-accent-soft);
    color: var(--brand-accent);
    font-weight: 600;
}

.store-main[b-w5ta3njblv] {
    flex: 1 0 auto;
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.store-footer[b-w5ta3njblv] {
    flex-shrink: 0;
    border-top: 1px solid var(--divider);
    padding: 1.25rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.store-footer-inner[b-w5ta3njblv] {
    max-width: 78rem;
    margin: 0 auto;
    text-align: center;
}

.store-footer a[b-w5ta3njblv] {
    color: var(--text-muted);
    text-decoration: none;
}

.store-footer a:hover[b-w5ta3njblv] {
    color: var(--text-body);
    text-decoration: underline;
}

.store-footer-sep[b-w5ta3njblv] {
    margin: 0 0.5rem;
    opacity: 0.5;
}

/* Donate button: the one thing in the bar that must never be hunted for. */
.store-give[b-w5ta3njblv] {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--radius-md);
    background: var(--brand-accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.store-give:hover[b-w5ta3njblv] {
    background: var(--brand-primary-strong);
    color: #fff;
    text-decoration: none;
}

@media (min-width: 768px) {
    .store-main[b-w5ta3njblv] {
        padding: 2.5rem 1.5rem 4rem;
    }
}
/* /Components/Pages/Association.razor.rz.scp.css */
/* Gold highlight card for the Sunday feast time */
.feast-time-card[b-mv76sw8ile] {
    background: var(--brand-accent);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(255, 213, 36, 0.3);
    transition: var(--transition-base);
    color: var(--brand-primary-strong);
}

.feast-time-card:hover[b-mv76sw8ile] {
    transform: var(--lift-hover);
    box-shadow: 0 8px 25px rgba(255, 213, 36, 0.4);
}

.feast-time-title[b-mv76sw8ile] {
    font-size: 1.2rem;
    font-weight: var(--fw-semibold);
    color: var(--brand-primary-strong);
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.feast-time-title i[b-mv76sw8ile] {
    color: var(--brand-primary);
}
/* /Components/Pages/Connect.razor.rz.scp.css */
.hours-item[b-87gd06hjza] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(220, 207, 192, 0.5);
}

.hours-item:last-child[b-87gd06hjza] {
    border-bottom: none;
}

.hours-item.special[b-87gd06hjza] {
    background: var(--grad-gold);
    margin: 0.5rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border-bottom: none;
    color: var(--brand-primary-strong);
    font-weight: 600;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Hero band with the scrolling maha-mantra frame */
.hero-section[b-3xzlf2o9o3] {
    background: var(--surface-hero);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.hero-image-container[b-3xzlf2o9o3] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hero-image[b-3xzlf2o9o3] {
    width: auto;
    height: 100%;
    max-height: 300px;
    object-fit: contain;
}

.hero-content[b-3xzlf2o9o3] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-title[b-3xzlf2o9o3] {
    font-size: 2.5rem;
    line-height: 1.1;
}

.hero-subtitle[b-3xzlf2o9o3] {
    font-size: 1.3rem;
    line-height: 1.6;
}

/* .hero-content centres its children with text-align, which a flex row ignores, so the
   button needs centring on its own axis. It turns back at the same breakpoint where the
   heading and subtitle stop centring. */
.hero-actions[b-3xzlf2o9o3] {
    justify-content: center;
}

@media (min-width: 768px) {
    .hero-section[b-3xzlf2o9o3] { padding: 4rem 0; }
    .hero-content[b-3xzlf2o9o3] { text-align: left; }
    .hero-actions[b-3xzlf2o9o3] { justify-content: flex-start; }
    .hero-image-container[b-3xzlf2o9o3] { justify-content: flex-end; }
    .hero-title[b-3xzlf2o9o3] { font-size: 3.5rem; }
    .hero-subtitle[b-3xzlf2o9o3] { font-size: 1.5rem; }
    .hero-image[b-3xzlf2o9o3] { max-height: 400px; }
}

@media (min-width: 992px) {
    .hero-section[b-3xzlf2o9o3] { padding: 6rem 0; }
    .hero-title[b-3xzlf2o9o3] { font-size: 5rem; }
    .hero-subtitle[b-3xzlf2o9o3] { font-size: 1.8rem; }
    .hero-image[b-3xzlf2o9o3] { max-height: 500px; }
}

/* Srila Prabhupada portrait: photo on a warm-white mat */
.prabhupada-band[b-3xzlf2o9o3] {
    background: linear-gradient(135deg, var(--cream-0) 0%, var(--cream-100) 100%);
}

.matted-frame[b-3xzlf2o9o3] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    background: var(--surface-card);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
}

.matted-frame img[b-3xzlf2o9o3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform var(--dur-fast) ease;
}

.matted-frame img:hover[b-3xzlf2o9o3] {
    transform: scale(1.03);
}

@media (max-width: 767px) {
    .matted-frame[b-3xzlf2o9o3] { height: 300px; }
}
/* /Components/Pages/Janmashtami.razor.rz.scp.css */
/* Festival flyer - a poster image, so a soft rounded frame rather than the warm frame.
   Capped on phones so it does not push the times and the donate button below the fold. */
.flyer[b-vihk2gpubx] {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 992px) {
    .flyer[b-vihk2gpubx] { max-height: 520px; }
}

/* The ISKCON 60 anniversary mark - a transparent logo, so no warm frame or well. */
.anniversary-mark[b-vihk2gpubx] {
    max-width: 100%;
    max-height: 140px;
    height: auto;
}

/* The anniversary note is a one-line footnote, not a full band. */
.band-slim[b-vihk2gpubx] {
    padding: 2rem 0;
}
/* /Components/Pages/SrilaPrabhupada.razor.rz.scp.css */
.hero-band[b-l12xs34l22] {
    background: var(--surface-hero);
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .hero-band[b-l12xs34l22] { padding: 4rem 0; }
}

/* Photo on a warm-white mat */
.hero-portrait[b-l12xs34l22] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    background: var(--surface-card);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
}

.hero-portrait img[b-l12xs34l22] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .hero-portrait[b-l12xs34l22] { height: 300px; }
}

.biography-band[b-l12xs34l22] {
    background: var(--surface-card);
}

.legacy-band[b-l12xs34l22] {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-100) 100%);
}

.biography-text[b-l12xs34l22] {
    line-height: var(--lh-body);
    color: var(--ink-700);
    font-size: 1.05rem;
}

.legacy-highlight[b-l12xs34l22] {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: var(--ink-700);
    padding: 0.75rem;
    background: rgba(236, 182, 2, 0.1);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--brand-accent);
}

.legacy-highlight i[b-l12xs34l22] {
    color: var(--brand-accent);
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
    margin-right: 0.5rem;
}
/* /Components/Pages/UcfRathaYatra.razor.rz.scp.css */
.flyer[b-npf6uqcvjg] {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.detail-icon[b-npf6uqcvjg] {
    font-size: 2.5rem;
    color: var(--brand-accent);
}

.expect-icon[b-npf6uqcvjg] {
    font-size: 2rem;
    color: var(--brand-accent);
}
/* /Components/Public/AnnouncementBar.razor.rz.scp.css */
/* Colour comes from tokens; this is layout only. Gold on deep purple is the highest-contrast
   pairing in the palette against a cream page, and unlike red it does not read as an error. */

.announcement-bar[b-3wmbwhbocy] {
    background: var(--grad-purple);
    color: var(--on-dark);
    font-size: 0.9rem;
}

.announcement-inner[b-3wmbwhbocy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.announcement-text[b-3wmbwhbocy] {
    color: var(--on-dark);
}

.announcement-link[b-3wmbwhbocy] {
    color: var(--brand-accent-bright);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.announcement-link:hover[b-3wmbwhbocy] {
    color: var(--on-dark);
}

.announcement-dismiss[b-3wmbwhbocy] {
    background: none;
    border: none;
    color: var(--on-dark-muted);
    padding: 0.25rem;
    margin-left: auto;
    line-height: 1;
}

.announcement-dismiss:hover[b-3wmbwhbocy] {
    color: var(--on-dark);
}

@media (max-width: 575.98px) {
    .announcement-inner[b-3wmbwhbocy] {
        gap: 0.5rem;
        font-size: 0.8125rem;
        text-align: left;
    }
}
/* /Components/Public/EventCard.razor.rz.scp.css */
.event-card[b-h2v9bjzp9i] {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-base);
    height: 100%;
    border: 1px solid var(--line-neutral);
}

.event-card:hover[b-h2v9bjzp9i] {
    transform: var(--lift-card);
    box-shadow: var(--shadow-card-hover);
}

.event-image-container[b-h2v9bjzp9i] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.event-image[b-h2v9bjzp9i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-fast) ease;
}

.event-card:hover .event-image[b-h2v9bjzp9i] {
    transform: scale(1.05);
}

.event-image-placeholder[b-h2v9bjzp9i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-well);
    color: var(--brand-accent);
    font-size: 3rem;
}

.event-date-overlay[b-h2v9bjzp9i] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--grad-purple);
    color: white;
    border-radius: var(--radius-lg);
    padding: 6px 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(41, 8, 73, 0.4);
    min-width: 50px;
}

.event-day[b-h2v9bjzp9i] {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 2px;
}

.event-month[b-h2v9bjzp9i] {
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.event-content[b-h2v9bjzp9i] {
    padding: 1.2rem;
}

.event-title[b-h2v9bjzp9i] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: var(--lh-snug);
    color: var(--text-heading);
}

.event-description[b-h2v9bjzp9i] {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: var(--lh-ui);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-details[b-h2v9bjzp9i] {
    color: var(--ink-400);
}

.event-datetime[b-h2v9bjzp9i] {
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
}

.event-datetime i[b-h2v9bjzp9i] {
    color: var(--brand-primary);
    width: 16px;
}

@media (min-width: 768px) {
    .event-image-container[b-h2v9bjzp9i] {
        height: 250px;
    }

    .event-date-overlay[b-h2v9bjzp9i] {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        min-width: 60px;
    }

    .event-day[b-h2v9bjzp9i] {
        font-size: 1.4rem;
    }

    .event-content[b-h2v9bjzp9i] {
        padding: 1.5rem;
    }

    .event-title[b-h2v9bjzp9i] {
        font-size: 1.4rem;
    }
}