@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@font-face {
    font-family: 'Zesant';
    /* Ensure the path is correct relative to your CSS file */
    src: url('/style/CezanneProN.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Ensures text is visible while font is loading */
}
:root{
    --bg: 214 95% 92%;  /* light blue */
    --card-bg: 0 0% 100% / 0.18; /* Not directly used for this page's main layout, but for consistency */
    --card-border: 0 0% 100% / 0.45; /* Not directly used for this page's main layout, but for consistency */
    --text: 222 22% 12%; /* Black/dark text */
    --muted: 222 10% 35%; /* Muted text */
    --accent: 199 89% 48%; /* Blue accent (not prominent in CCJ image, but kept for buttons) */
    --shadow: 220 40% 2%;
    --radius: 20px;

    /* --- NEW: Culture Club Specific Colors --- */
    --ccj-yellow: #f5f412; /* Bright yellow from the image */
    --ccj-menu-shadow: #f5f412;
    --ccj-yellow-dark: #6e6d09;
    --ccj-yellow-light: #efef86;
    --ccj-black: #000000;
    --ccj-gray: #9ca3af;
    --ccj-page-bg: 225 55% 83%;
    --ccj-card-bg: 54 96% 84% / 0.32;
    --ccj-white: #fefefe; /* Bright yellow from the image */
    --ccj-green-btn: 140 70% 45%; /* Green button color */
    --ccj-gradient-start: 260 70% 60%; /* Purple start for gradient button */
    --ccj-gradient-end: 25 90% 60%; /* Orange end for gradient button */
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    min-width: 400px !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
    color: hsl(var(--text));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background: white;
}

/* 418 special */
.brew {
    position: relative;
    display: inline-block;
}

/* CUP: front layer */
.cup {
    position: relative;
    display: inline-block;
    z-index: 2;           /* cup (and its emoji text) above steam */
}

/* STEAM PARTICLES: back layer */
.steam {
    position: absolute;
    z-index: -1;           /* behind the cup, above background */

    left: 50%;
    bottom: 0.1em;

    width: 0.45em;
    height: 0.45em;

    background: radial-gradient(
            circle,
            hsla(0, 0%, 100%, 1.0) 0%,
            hsla(0, 0%, 100%, 0.0) 80%
    );

    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    filter: blur(2px);
}

/* different timing/paths for each particle */
.s1 { animation: steamPuff1 2.4s ease-in-out infinite; }
.s2 { animation: steamPuff2 2.9s ease-in-out infinite 0.5s; }
.s3 { animation: steamPuff3 3.2s ease-in-out infinite 1s; }

@keyframes steamPuff1 {
    0%   { transform: translate(-55%, 0.2em) scale(0.5); opacity: 0; }
    15%  { opacity: 0.9; }
    50%  { transform: translate(-60%, -0.4em) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -1.2em) scale(1.6); opacity: 0; }
}

@keyframes steamPuff2 {
    0%   { transform: translate(-50%, 0.2em) scale(0.4); opacity: 0; }
    20%  { opacity: 0.8; }
    55%  { transform: translate(-45%, -0.5em) scale(1); opacity: 0.7; }
    100% { transform: translate(-48%, -1.3em) scale(1.7); opacity: 0; }
}

@keyframes steamPuff3 {
    0%   { transform: translate(-52%, 0.1em) scale(0.45); opacity: 0; }
    18%  { opacity: 0.85; }
    60%  { transform: translate(-57%, -0.6em) scale(1.05); opacity: 0.6; }
    100% { transform: translate(-49%, -1.4em) scale(1.8); opacity: 0; }
}

.note {
    margin-top: 2rem;
    font-size: 0.8rem;
    text-align: center;
    color: hsla(0, 0%, 0%, 0.55);   /* soft black */
    font-style: italic;
    letter-spacing: 0.3px;
    user-select: none;
}

.bubble-error-brew {
    text-shadow:
            0 0 6px color-mix(in srgb, var(--ccj-yellow) 70%, white),
            0 0 20px color-mix(in srgb, var(--ccj-yellow-dark) 45%, transparent),
            0 0 32px color-mix(in srgb, var(--ccj-yellow) 25%, transparent);
}

/* CARD STYLES */

.ccj-wrap{
    display:grid; place-items:center;
    padding: 4vmin;
    color:hsl(var(--text));
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.ccj-card{
    width:min(680px, 92vw);
    border-radius:var(--radius);
    padding: clamp(18px, 3.5vmin, 36px);
    background: hsla(var(--ccj-card-bg));
    border: 1px solid hsla(var(--card-border));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow:
            0 1px 0 hsla(var(--card-border)),
            0 30px 60px -15px hsl(220 40% 2% / 0.45);
}
.ccj-card h1{ margin:0 0 10px; font-size:clamp(18px, 2.2vmax, 28px); line-height:1.25; font-weight:700; }
.ccj-sub{ margin:0 0 18px; color:hsl(var(--muted)); font-size:.95rem; }

.ccj-row{ display:grid; grid-template-columns: 1fr; gap:12px; }
.ccj-label{ font-size:.9rem; color:hsl(var(--muted)); display:block; margin-bottom:6px; }
.ccj-select{
    width:100%; padding:12px 14px; font-size:1rem;
    border-radius:12px; border:1px solid hsla(var(--card-border));
    background: hsla(0 0% 100% / 0.55);
    outline:none; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ccj-select:focus{
    border-color: hsl(var(--accent)/0.6);
    box-shadow: 0 0 0 4px hsl(var(--accent)/0.15);
    background: hsla(0 0% 100% / 0.75);
}

.ccj-err{ color:#b00020; font-size:.9rem; min-height:1.2em; }

.ccj-actions{
    display:grid; gap:10px; margin-top:12px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px){ .ccj-actions{ grid-template-columns: repeat(4, 1fr); } }

.ccj-btn{
    appearance:none;
    border-radius:12px; padding:12px 14px;
    font-weight:600; cursor:pointer;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    background: hsla(0 0% 100% / 0.6);
    border: 1px solid hsla(var(--card-border));
}
.ccj-btn[data-primary="true"]{
    background:hsl(var(--accent)); color:#fff;
    box-shadow: 0 10px 22px -10px hsl(var(--accent)/0.7);
}
.ccj-btn:hover{ transform: translateY(-1px); }
.ccj-btn:active{ transform: translateY(0); }
.ccj-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.day-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 9999px; /* Full rounded */
    transition:
            box-shadow 0.35s ease,
            background-color 0.35s ease,
            border-color 0.35s ease;
    aspect-ratio: 1 / 1; /* Ensures square cells */
}


/* TIME SLOT BUTTONS – BRAND YELLOW SYSTEM */
#time-slots {
    padding: 0 1.0rem;
}
.time-slot-btn {
    display: block;
    width: calc(100% - 1rem);   /* leave ~0.5rem space each side for glow */
    margin: 0.25rem auto;       /* centre inside the padded column */
    padding: 0.75rem 1rem;

    border-radius: 9999px;      /* pill shape */
    border: 1px solid color-mix(in srgb, var(--ccj-yellow-dark) 60%, transparent);

    background-color: color-mix(in srgb, var(--ccj-yellow) 4%, white);
    color: #000000;

    box-shadow: 0 0 4px 1px color-mix(in srgb, var(--ccj-yellow) 18%, transparent);

    font-size: 0.875rem;
    text-align: center;

    transition:
            box-shadow 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            transform 0.15s ease;
}

/* HOVER: clearer glow + stronger background */
.time-slot-btn:hover {
    background-color: color-mix(in srgb, var(--ccj-yellow) 16%, white);
    box-shadow: 0 0 8px 3px color-mix(in srgb, var(--ccj-yellow) 45%, transparent);
    transform: translateY(-1px);
}

/* SELECTED: solid yellow, strongest (but toned-down) glow */
.time-slot-btn.selected, .time-slot-btn.selected:hover {
    background-color: var(--ccj-yellow);
    color: #000000;

    border-color: var(--ccj-yellow-dark);
    box-shadow:
            0 0 8px 4px color-mix(in srgb, var(--ccj-yellow) 35%, transparent),
            0 0 14px 8px color-mix(in srgb, var(--ccj-yellow) 15%, transparent);

    font-weight: 600;
    transform: translateY(-1px);
}
.time-slot-btn:focus-visible {
    outline: none;
    box-shadow:
            0 0 6px 3px color-mix(in srgb, var(--ccj-yellow) 55%, transparent);
}


/* NEW LAYOUT CLASSES */

/* Main calendar + time slot layout on wider screens */
.booking-stage {
    display: flex;
    gap: 1.5rem; /* space between calendar and time slots */
}

/* Calendar and time-slot pane share width on larger screens */
.booking-stage .calendar-container {
    width: 50%;
    padding-right: 1.5rem;
    border-right: 1px solid #e5e7eb;
}

.booking-stage .time-slot-pane {
    width: 50%;
    padding-left: 1.5rem;
}

/* Below 650px: stack calendar above time slots */
@media (max-width: 650px) {
    .booking-stage {
        flex-direction: column;
    }

    .booking-stage .calendar-container {
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 1rem;
    }

    .booking-stage .time-slot-pane {
        width: 100%;
        padding-left: 0;
        padding-top: 1rem;
    }
}
/* Custom classes for availability and selection */

.day-cell.available {
    font-weight: 600;
    color: black;
    border: 2px solid color-mix(in srgb, var(--ccj-yellow-dark) 40%, transparent);
    box-shadow:
            0 0 4px 2px color-mix(in srgb, var(--ccj-yellow) 25%, transparent);
    background-color: color-mix(in srgb, var(--ccj-yellow) 10%, white);
    position: relative;
    overflow: hidden; /* ensures gradient doesn't spill out */
    z-index: 1;
}


.day-cell.available:hover {
    box-shadow:
            0 0 8px 4px color-mix(in srgb, var(--ccj-yellow) 60%, transparent),
            0 0 16px 10px color-mix(in srgb, var(--ccj-yellow) 35%, transparent);
    background-color: color-mix(in srgb, var(--ccj-yellow) 25%, white);
}
.day-cell.unavailable, .day-cell.past {
    color: var(--ccj-gray);
    box-shadow:
            0 0 4px 2px color-mix(in srgb, var(--ccj-gray) 30%, transparent);
    background-color: color-mix(in srgb, var(--ccj-gray) 10%, white);
    cursor: default;
}
.day-cell.today {
    border: 2px solid #777777;
    color: #777777;
    background: lightgray;
}
.day-cell.selected {
    background-color: var(--ccj-yellow);
    color: black;   /* ensures readable text */
    box-shadow:
            0 0 10px 6px color-mix(in srgb, var(--ccj-yellow-dark) 20%, transparent),
            0 0 20px 12px color-mix(in srgb, var(--ccj-yellow-dark) 35%, transparent);
    border-color: var(--ccj-yellow-dark);
}

/* Trial booking selector page */
/* Overall container */
.schedule-container {
    width: 100%;
    max-width: 1000px;
    container-type: inline-size;
    margin: 0 auto;
}

/* Title */
.title {
    font-size: 1.75rem;
    font-weight: 800;
    text-align: left;
    margin-bottom: 1.5rem;
    color: #000;
}

/* Selector layout */
.selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Card-as-button */
.selector-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    cursor: pointer;

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--ccj-yellow) 80%, transparent) 0%,
                    color-mix(in srgb, var(--ccj-yellow) 70%, transparent) 40%,
                    color-mix(in srgb, var(--ccj-yellow) 30%, white) 100%
            );
    box-shadow:
            0 4px 10px color-mix(in srgb, var(--ccj-yellow) 25%, transparent);

    border: 1px solid color-mix(in srgb, var(--ccj-yellow-dark) 50%, transparent);

    transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            border-color 0.18s ease,
            background 0.18s ease;
}

/* Hover / focus state */
.selector-card:hover,
.selector-card:focus-within {
    transform: translateY(-2px);
    box-shadow:
            0 6px 16px color-mix(in srgb, var(--ccj-yellow) 38%, transparent);
    border-color: var(--ccj-yellow-dark);

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--ccj-yellow) 90%, transparent) 0%,
                    color-mix(in srgb, var(--ccj-yellow) 90%, transparent) 35%,
                    color-mix(in srgb, var(--ccj-yellow) 45%, white) 100%
            );
}

/* Header text inside card */
.selector-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #000;
}

/* Placeholder for future image */
.placeholder-card {
    flex-grow: 1;
    min-height: 120px;
    border-radius: 0.75rem;
    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--ccj-yellow) 10%, white),
                    color-mix(in srgb, var(--ccj-yellow-dark) 8%, white)
            );
    border: 1px dashed color-mix(in srgb, var(--ccj-yellow-dark) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #111;
    text-align: center;
}
.image-card {
    /*width: 183px;  !* Fixed on desktop *!*/
    /*height: 138px;*/
    width: 100%;
    margin: 0 auto; /* Center it within the main-card column */
}

/* Simplify the internal stretching logic */
.image-card a,
.image-card img {
    display: block;
    width: 100%;
    height: 100%;
}

.image-card img {
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--ccj-yellow-dark) 50%, transparent);
}


/* Payment complete page */
.icon { font-size: 60px; margin-bottom: 20px; display: block; }

.details-box { background: #f9fafb; padding: 20px; border-radius: 8px; text-align: left; margin-bottom: 30px; border: 1px solid #e5e7eb; }
.details-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; }
.details-label { color: #666; font-weight: bold; }
.details-val { font-weight: normal; }

.btn { display: inline-block; padding: 12px 24px; background-color: #000; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; transition: opacity 0.2s; cursor: pointer; border:none; font-size: 1rem; }
.btn:hover { opacity: 0.8; }
.btn-secondary { background-color: #fff; color: #333; border: 1px solid #ccc; margin-top: 10px; }

.text-green-600 { color: #059669; }
.text-red-600 { color: #dc2626; }
.text-yellow-600 { color: #d97706; }
.text-gray-500 { color: #6b7280; }

/* Side-by-side on wider displays */
/*@media (min-width: 450px) {*/
/*    .selector {*/
/*        flex-direction: row;*/
/*    }*/
/*    .selector-card {*/
/*        flex: 1;*/
/*    }*/
/*}*/





.card{
    position: relative;
    width:min(680px, 92vw);
    border-radius: var(--radius);
    padding: clamp(18px, 3.5vmin, 36px);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: hsla(var(--card-bg));
    border: 1px solid hsla(var(--card-border));
    box-shadow:
            0 1px 0 hsla(var(--card-border)),
            0 30px 60px -15px hsla(var(--shadow)/0.45);
}

.title{
    margin: 0 0 30px;
    font-size: clamp(18px, 2.2vmax, 28px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.subtitle{
    margin: 0 0 20px;
    font-size: 0.95rem;
    color: hsl(var(--muted));
}

.countdown{
    position: absolute;
    top: 12px; right: 14px;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    padding: 6px 10px;
    border-radius: 999px;
    background: hsla(var(--card-bg));
    text-align: right;
}

form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 6px;
}
.full { grid-column: 1 / -1; }

label{
    display:block;
    font-size: 0.9rem;
    margin: 0 0 6px;
    color: hsl(var(--muted));
}

input{
    width: 100%;
    border-radius: 12px;
    border: 1px solid hsla(var(--card-border));
    background: hsla(0 0% 100% / 0.55);
    padding: 12px 14px;
    outline: none;
    font-size: 1rem;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input:focus{
    border-color: hsl(var(--accent)/0.6);
    box-shadow: 0 0 0 4px hsl(var(--accent)/0.15);
    background: hsla(0 0% 100% / 0.75);
}
.err{
    margin-top: 6px;
    color: #b00020;
    font-size: 0.85rem;
}

.calendar-icon-colored{
    color: var(--ccj-yellow-dark);
}

.actions{
    display:flex;
    gap:10px;
    justify-content: flex-end;
    margin-top: 6px;
}
button{
    appearance:none;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn-cancel{
    background: hsla(0 0% 100% / 0.6);
    border: 1px solid hsla(var(--card-border));
}
.btn-cancel:hover{ opacity: .9; }
.btn-book{
    background: hsl(var(--accent));
    color: white;
    box-shadow: 0 10px 22px -10px hsl(var(--accent)/0.7);
}
.btn-book:hover{ transform: translateY(-1px); }
.btn-book:active{ transform: translateY(0); }

.timeout-message {
    color: #b00020;
    font-weight: 600;
    text-align: center;
    margin: 1em 0;
}

input:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: hsla(0 0% 90% / 0.8);
}

@media (max-width: 640px){
    form{ grid-template-columns: 1fr; }
    .countdown{ position: static; margin-bottom: 8px; align-self: flex-end; }
}

/* Contract Page */
/* Basic CSS to match the 'Card' layout implied by your snippet */
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Contract Specific Styles */
.contract-summary { background: #f0f8ff; padding: 15px; border-radius: 4px; margin-bottom: 20px; border-left: 4px solid #3498db; }
.price-tag { font-size: 1.2rem; font-weight: bold; color: #2c3e50; }
.original-price-strike {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.9rem;
    margin-right: 8px;
}

.campaign-active {
    color: #b00020; /* A soft red/maroon for the discount price */
    display: inline-block;
}

.campaign-note {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: color-mix(in srgb, var(--ccj-yellow) 20%, white);
    border-left: 4px solid var(--ccj-yellow);
    font-size: 0.85rem;
    color: #444;
    border-radius: 4px;
}
.terms-box {
    height: 150px; /* Original height */
    overflow-y: scroll;
    font-size: 0.8rem;
    margin-bottom: 10px;
    background: #fafafa;

    /* ADDED: Smooth transition for height and shadow */
    transition: height 0.4s ease, box-shadow 0.4s ease;
    padding: 10px 10px 20px;
}

/* ADDED: The "expanded" state */
.terms-box.expanded {
    height: 550px; /* Double the height */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Shadow effect */
}
.checkbox-group { flex-direction: row; align-items: center; gap: 10px; }

.number-list{
    list-style-position: outside;
    list-style-type: decimal;
    padding-left: 2em;
}
p.spaced {
    margin-bottom: 1em;
}

/* The Integrated Button */
.expand-btn {
    position: absolute;
    bottom: 1px; /* Aligns with box border */
    left: calc(50% - 60px);
    right: auto;
    width: 120px;
    height: 20px;
    background: #eee;
    border: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    font-size: 0.75rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* The Shadow/Gradient Overlay Effect */
.expand-btn::before {
    content: '';
    position: absolute;
    top: -10px; /* Sits above the button */
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1));
    pointer-events: none; /* Allows scrolling through the shadow */
}

/* State changes */
.terms-box.expanded {
    height: 550px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Optional: Hide the gradient when expanded since it's no longer needed */
.terms-box.expanded + .expand-btn::before {
    display: none;
}
.terms-wrapper {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0 !important;
    border: 1px solid #ccc;
    background: #fff;
}

/* Stripe Element Container */
#payment-element { min-height: 200px; margin-bottom: 20px; }
.err {
    display: none;
}
.err_show {
    display: block !important;
}
input.contract {
    border: 1px solid var(--ccj-black) !important;
    background-color: var(--ccj-yellow-light) !important;
    padding: 10px 14px !important;
}

.btn-cancel-contract{
    background: hsla(0 0% 100% / 0.6);
    border: 1px solid lightcoral;
}
.checkbox-group > input {
    width: auto !important;
}
.checkbox-group > label {
    display: inline-block !important;
}
/* End contract specific styles */

#page-wrapper {
    width: 100%;
    min-height: 0;
    /* The key line: flex-grow: 1 makes this wrapper consume all remaining vertical space */
    flex-grow: 1;

    /* Also make the wrapper a flex container to push the content down */
    display: flex;
    flex-direction: column;
}

/* 4. The Main Content Area - Must take up all space between the top and the footer */
.main-content {
    width: 100%;
    /* This element is inside the wrapper and must push the actual footer down */
    flex-grow: 1;

    /* We must also remove vertical margins that interfere with Flexbox calculations */
    margin-top: 30px;
    margin-bottom: 0;

    /* Ensure children stack */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- Header Styling --- */
.header-strip {
    background-color: var(--ccj-yellow);
    padding: 5px 4vmin; /* Padding on top/bottom and sides */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.logo-container {
     font-size: 2.3rem;
     font-weight: 800;
     text-decoration: none;
     margin-right: 20px; /* Space between logo and nav */
     width: 180px;
     height: 60px;
 }
.logo {
    font-size: 2.3rem;
    font-weight: 800;
    text-decoration: none;
    margin-right: 20px; /* Space between logo and nav */
    max-width: 180px;
    max-height: 50px;
}

.logo img {
    width: 100%;
    height: auto;
}

.main-nav {
    display: flex;
    gap: 25px; /* Space between main nav items */
    flex-grow: 1; /* Allow nav to take available space */
    justify-content: flex-start; /* Align nav items to the left */
    flex-wrap: wrap; /* Allow nav items to wrap */
}

.nav-item {
    position: relative; /* Needed for dropdown positioning */
}

.nav-link {
    color: hsl(var(--text));
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 5px 0;
    transition: text-decoration 0.2s ease;
}
.bar {
    margin-top: -6px;
    height: 4px;
    background-color: hsl(var(--text));
    width: 100%;
}
.nav-link:hover {
    text-decoration: underline;
}

/* Dropdown specific styling */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--ccj-yellow); /* Same as header for consistency */
    min-width: 180px;
    box-shadow: 0 8px 16px 0 hsla(var(--shadow)/0.2);
    z-index: 1;
    padding: 10px 0;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    top: 100%; /* Position below the parent nav-item */
    left: 0;
    overflow: visible;
}

.dropdown-content a {
    color: hsl(var(--text));
    padding: 8px 15px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    font-size: 0.95rem;
}

.dropdown-content a:hover {
    background-color: hsla(var(--text)/0.1); /* Slight hover effect */
    text-decoration: underline;
}

.nav-item:hover .dropdown-content {
    display: block;
}

/* --- Trial Button --- */
.trial-button, .login-button {
    color: black; /* Yellow text */
    padding: 8px 18px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    margin-left: auto; /* Push to the right */
    transition: color 0.2s ease, color 0.2s ease;
}
.login-button {
    background-color: #00bf63; /* Canva 2025-12-23 */
    margin-left: 10px;
}
.trial-button {
    background-color: #ff914d; /* Canva 2025-12-23 */
}
.trial-button:hover, .login-button:hover {
    color: white;
    text-decoration: none; /* Remove underline on button hover */
}


/* Main page full div */
.full-page-container {
    /* Full Screen dimensions */
    margin-top: -30px;
    width: 100vw;
    height: 100vh;

    /* Background Setup */
    background:
            linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), /* Darken overlay for text readability */
            url('/static/front_bg.png') no-repeat center center;
    background-size: cover;

    /* Layout Engine */
    display: grid;
    grid-template-rows: 1fr 1fr; /* Split into top and bottom halves */
    padding: 5vh 5vw; /* Safe area from edges */
}

/* Upper-middle, Right side */
.top-content {
}

.full-page-text {
    display: flex;
    justify-content: flex-end; /* Push to right */
    align-items: center;      /* Center vertically within the top half */
    text-align: right;
    font-family: 'Zesant', system-ui, sans-serif; /* Fallbacks are important */
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 900;color: white;
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
    min-height: 2.2em; /* Prevents layout jump when text switches */
    -webkit-text-stroke: 2px black;
}

/* Bottom, 10% from edge, Middle */
.bottom-content {
    display: flex;
    justify-content: center; /* Middle horizontally */
    align-items: flex-end;  /* Bottom vertically */
    padding-bottom: 10vh;   /* 10% from the bottom edge */
}

.tagline-part {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    visibility: hidden;
}

.tagline-part.active {
    opacity: 1;
    visibility: visible;
}

/* Links */

.link-disabled {
    position: relative;
    display: inline-block;
    text-decoration: line-through;
    color: #999;
    cursor: not-allowed;
    pointer-events: auto !important;
}
.link-disabled::after {
    content: attr(data-tooltip); /* Pulls text from the data-tooltip attribute */
    position: absolute;
    bottom: 100%; /* Position above the text */
    left: 50%;
    transform: translate(-50%, 10px);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
    text-decoration: none; /* Ensure the tooltip text isn't struck-through */
}
.link-disabled::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.link-disabled:hover::after,
.link-disabled:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 5px);
}

.dropdown-content span {
    padding: 8px 15px;
    display: block;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: line-through;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}
/* --- Main Content Layout --- */

.content-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px); /* Responsive 3-column */
    gap: 30px;
}

.section-header {
    grid-column: 1 / -1; /* Header spans all columns */
    font-size: 1.8rem;
    font-weight: 700;
    color: hsl(var(--text));
    margin-bottom: 10px;
}

.main-content-section {
    display: flex;
    flex-direction: row; /* Default: 3 columns */
    gap: 1.5rem;
    justify-content: space-between;
}
/*.main-section-header {*/
/*    grid-column: 1 / -1; !* Header spans all columns *!*/
/*    font-size: 1.2rem;*/
/*    font-weight: 700;*/
/*    color: hsl(var(--text));*/
/*    margin-bottom: 10px;*/
/*}*/

.placeholder-card {
    background-color: #ccc; /* Gray placeholder */
    aspect-ratio: 4 / 3; /* Common image aspect ratio */
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 1.2rem;
    text-align: center;
    padding: 20px;
}

/* --- Call to Action Buttons --- */
.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 50px;
}

.cta-button {
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: white;
    white-space: nowrap;
    background-size: 200% auto;
    transition:
            transform 0.6s ease,
            box-shadow 0.6s ease,
            border 0.6s ease,
            background-position 0.6s ease;
    /*border: 1px solid transparent;*/
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px var(--ccj-yellow);
    background-position: 100% 0;
}

.cta-line {
    background-image: linear-gradient(
            to right,
            hsl(var(--ccj-green-btn)) 0%,
            hsl(var(--ccj-green-btn)) 50%,
            #000 50%,
            #000 100%
    );
    box-shadow: 0 10px 20px -10px hsl(var(--ccj-green-btn)/0.7);
}

.cta-trial {
    background-image: linear-gradient(
            to right,
            hsl(var(--ccj-gradient-start)) 0%,
            hsl(var(--ccj-gradient-end)) 50%,
            #000 50%,
            #000 100%
    );
    box-shadow: 0 10px 20px -10px hsla(var(--ccj-gradient-start)/0.7), 0 10px 20px -10px hsla(var(--ccj-gradient-end)/0.7);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .header-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .main-nav {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    .logo {
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
    .login-button,
    .trial-button {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-content {
        padding: 2vmin;
    }
    .content-section {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-button {
        width: 90%; /* Make buttons wider on small screens */
    }
}

/* --- Beautiful Forms --- */


.card{
    position: relative;
    width:min(450px, 92vw);
    border-radius: var(--radius);
    padding: clamp(18px, 3.5vmin, 36px);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: hsla(var(--card-bg));
    border: 1px solid hsla(var(--card-border));
    box-shadow:
            0 1px 0 hsla(var(--card-border)),
            0 30px 60px -15px hsla(var(--shadow)/0.45);
}
.main-content-section { /* the element was section.main-content-section */
    grid-template-columns: 1fr;
    flex-wrap: wrap;
    container-type: inline-size;
}

.main-card {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Following is original */
    border-radius: var(--radius);
    padding: clamp(5px, 1.5vmin, 20px);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: hsla(var(--card-bg));
    border: 1px solid hsla(var(--card-border));
    box-shadow:
            0 1px 0 hsla(var(--card-border)),
            0 30px 60px -15px hsla(var(--shadow)/0.45);
}

.subtitle{
    margin: 0 0 20px;
    font-size: 0.95rem;
    color: hsl(var(--muted));
    text-align: center;
}

form{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px 0;
    margin-top: 6px;
}
.full { grid-column: 1 / -1; }

label{
    display:block;
    font-size: 0.9rem;
    margin: 0 0 6px;
    color: hsl(var(--muted));
}

input{
    width: 100%;
    border-radius: 12px;
    border: 1px solid hsla(var(--card-border));
    background: hsla(0 0% 100% / 0.55);
    padding: 12px 14px;
    outline: none;
    font-size: 1rem;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input:focus{
    border-color: hsl(var(--accent)/0.6);
    box-shadow: 0 0 0 4px hsl(var(--accent)/0.15);
    background: hsla(0 0% 100% / 0.75);
}
.err, .success-msg {
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
}
.err {
    color: #b00020;
    background: #ffe3e3;
}
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.continuous-shake {
    display: inline-block;
    animation: mild-shake 1.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes mild-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(1px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-2px, -1px, 0); }
    40%, 60% { transform: translate3d(1px, 1px, 0); }
}
.success-msg {
    color: #0d6efd;
    background: #e6f0ff;
}

.actions{
    display:flex;
    gap:10px;
    justify-content: flex-end;
    margin-top: 6px;
}
button{
    appearance:none;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    width: 100%;
}
.btn-book{
    background: hsl(var(--accent));
    color: white;
    box-shadow: 0 10px 22px -10px hsl(var(--accent)/0.7);
}
.btn-book:hover{ transform: translateY(-1px); }
.btn-book:active{ transform: translateY(0); }


/* --- Schedule --- */
.schedule-container {
    max-width: 800px;
    margin: 0 auto;
}
/* Top header section (Black on White) */
.header-section {
    padding: 15px 25px 10px;
}
.header-section h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
    padding: 0;
    line-height: 1;
}
.header-section p {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 5px 0 0;
    padding: 0;
}
/* Schedule table container */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 5px solid #000;
}
/* Yellow row/column headers */
.schedule-table th {
    background-color: #FFFF40; /* Bright Yellow */
    color: #000;
    font-weight: 800;
    padding: 10px 5px;
    border: 3px solid #000;
    text-align: center;
    font-size: 1.1rem;
}
/* Data cells */
.schedule-table td {
    background-color: #fff;
    color: #000;
    padding: 10px 5px;
    border: 3px solid #000;
    text-align: center;
}
/* Footer event section */
.footer-event-section {
    background-color: #FFFF40; /* Bright Yellow */
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align event info to the bottom of the section */
}
.event-info {
    color: #000;
    text-align: right;
    margin-left: auto; /* Push event info to the right */
}
.event-info h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1;
}
.event-info p {
    font-size: 1rem;
    margin: 3px 0;
}

.footer-event-section {
    /* No special flex properties needed here, it just sits at the bottom */
    margin-top: auto; /* Optional: adds space before the footer, making it float to the bottom */
    padding-bottom: 25px; /* Add bottom padding so the content isn't flush with the browser edge */
}

.bubble-error {
    width: 400px;
    height: 200px;

    margin: 40px auto;             /* centres horizontally within normal flow */
    background: #000;
    color: #fff;

    border-radius: 7px;

    display: flex;
    align-items: center;           /* vertical centring */
    justify-content: center;       /* horizontal centring */

    font-size: clamp(40px, 10vw, 140px);  /* auto-scale digits */
    font-weight: bold;
    text-align: center;

    padding: 0 10px;
    box-sizing: border-box;
}


/* container modifiers */

@container (width < 700px) { /* Adjusting to 700px to allow for 3x183px + gaps */

    .main-content-section {
        flex-direction: column; /* Snap to single column */
        align-items: center;
    }

    .main-card {
        width: 100% !important; /* Now fill the whole container */
    }

    .image-card {
        width: 100%;  /* Image card now stretches */
        height: auto;
        aspect-ratio: 183 / 138;
    }
}


/* Arrow selectors */
/* --- Flex Container for Cards --- */
.arrowed-selector {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem; /* Space between yellow cards */
}

/* Responsive: Stack cards on smaller screens */
@media (max-width: 768px) {
    .arrowed-selector {
        flex-direction: column;
    }
}

/* --- Individual Yellow Card Styling --- */
.arrowed-card {
    background-color: #FFFD38; /* Bright yellow */
    border-radius: 1.25rem;    /* Rounded corners */
    padding: 2.5rem 1rem 1rem 1rem;
    flex: 1;                   /* Equal width */
    display: flex;
    flex-direction: column;
    align-items: center;       /* Center content */
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    max-width: 170px;
}

.arrowed-card:hover {
    transform: translateY(-2px); /* Subtle lift */
}

/* --- Image Container --- */
.arrowed-card-image-container {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

/* Ensure images/SVGs fit inside the container */
.arrowed-card-image-container img,
.arrowed-card-image-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Text Styling --- */
.arrowed-card-text {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 2rem;
    color: #1a1a1a;
}

/* --- Arrow Wrapper & Animation --- */
.arrowed-card-goto-arrow {
    margin-top: auto; /* Pushes arrow to bottom */
    padding-bottom: 0;
    margin-bottom: -1.7rem;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arrowed-card a{
    display: inline-block;
    text-decoration: none;
    color: #000;
}

/* Animate arrow downwards on hover */
.arrowed-card:hover .arrowed-card-goto-arrow {
    transform: translateY(7px) scale(1.5);
}

/* --- The Arrow Shape --- */
.arrow-down {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-bottom: 5px solid #222;
    border-right: 5px solid #222;
    transform: rotate(45deg) translate(-4px, -4px);
}

.arrowed-card a {
    display: inline-block;
    width: 100%;
}


/* Price plan */
/* --- Container for the pricing section --- */
.price-selector {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Space between the two columns */
    background-color: #FCFCC7; /* Pale yellow background from image */
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 0 auto;
    max-width: 900px; /* Constrain width on large screens */
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .price-selector {
        flex-direction: column;
        padding: 2rem 1rem;
    }
}

/* --- Individual Price Card Wrapper (Includes Title + White Box) --- */
.price-card {
    flex: 1; /* Equal width */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

/* --- Header Section (Outside the white box) --- */
.price-plan-name {
    text-align: center;
    margin-bottom: 1rem;
    color: #000;
}

.price-plan-name-jp {
    font-size: 1.5rem; /* ~24px */
    font-weight: bold;
    line-height: 1.4;
}

.price-plan-name-en {
    font-size: 1.25rem; /* ~20px */
    font-weight: normal;
    margin-top: 0.25rem;
}

/* --- The White Box Section --- */
.price-plan-details {
    position: relative;
    background-color: #ffffff;
    border-radius: 30px; /* Highly rounded corners */
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't break width */
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    /* Vertical layout inside white box */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-plan-badge {
     position: absolute;
     top: 2px;   /* Move up to overlap border */
     right: 14px; /* Move right to overlap border */
     width: 70px;  /* Size of the badge */
     height: 70px;
     z-index: 10;  /* Ensure it floats above everything */
     display: flex;
     justify-content: center;
     align-items: center;
     /*filter: drop-shadow(0 4px 3px rgba(0,0,0,0.2)); !* Optional shadow for depth *!*/
 }

.price-plan-badge img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0; /* Behind the text */
}

.price-plan-badge span {
    position: relative;
    z-index: 1; /* On top of the image */

    /* Text Styling - Adjust to match your .webp background color */
    color: red;
    font-weight: bold;
    font-size: 0.55rem;
    /*text-shadow: 0 1px 2px rgba(0,0,0,0.5); !* Ensures readability *!*/

    /* Fine-tuning: Move text down if your webp has a ribbon at the bottom */
    margin-top: 42px;
}

/* Type: "Lessons Unlimited" etc */
.price-plan-type {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Strikethrough Price */
.price-plan-full-price {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

/* Custom red line for strikethrough */
.price-crossout {
    text-decoration: line-through;
    text-decoration-color: #ff6b6b; /* Redish color */
    text-decoration-thickness: 3px;
}

/* Main Discounted Price */
.price-plan-discounted-price {
    font-size: 2.25rem; /* Large ~36px */
    font-weight: bold;
    margin-bottom: 25px;
}

/* Button Container */
.price-plan-book-trial {
    width: 100%;
    margin-bottom: 20px;
}

/* The Button Style */
.price-plan-book-trial a {
    display: block;
    background-color: #F4F430; /* Bright Yellow */
    color: #000;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    border-radius: 50px; /* Pill shape */
    width: 80%;
    margin: 0 auto;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.price-plan-book-trial a:hover {
    opacity: 0.8;
}

.price-plan-direct-link {
    margin-top: -5px; /* Space between yellow button and this text */
    text-align: center;
    font-size: 0.85rem; /* Slightly smaller than body text */
}

/* The Link Style */
.price-plan-direct-link a {
    color: #333; /* Dark gray/Black */
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.2s;
}

.price-plan-direct-link a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Separator Line */
.price-plan-separator {
    width: 90%;
    height: 2px;
    background-color: #888;
    margin: 10px auto 20px auto;
}

/* Description: "1 Lesson 50 min" */
.price-plan-description {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* Note: "*Limit 1 per day" */
.price-plan-note {
    font-size: 0.8rem;
    font-weight: bold;
    color: #000;
}

/* LOGIN Page */
.card-login {
    position: relative;
    width:min(450px, 92vw); /* Narrower for a login form */
    border-radius: var(--radius);
    padding: clamp(18px, 3.5vmin, 36px);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: hsla(var(--card-bg));
    border: 1px solid hsla(var(--card-border));
    box-shadow:
            0 1px 0 hsla(var(--card-border)),
            0 30px 60px -15px hsla(var(--shadow)/0.45);
}

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

.full { grid-column: 1 / -1; }

.card-login label{
    display:block;
    font-size: 0.9rem;
    margin: 0 0 6px;
    color: hsl(var(--muted));
}

.card-login input{
    width: 100%;
    border-radius: 12px;
    border: 1px solid hsl(var(--accent)/0.15);
    background: hsla(0 0% 100% / 0.55);
    padding: 12px 14px;
    outline: none;
    font-size: 1rem;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.card-login input:focus{
    border-color: hsl(var(--accent)/0.6);
    box-shadow: 0 0 0 4px hsl(var(--accent)/0.15);
    background: hsla(0 0% 100% / 0.75);
}
.card-login .err{
    margin-top: 6px;
    color: #b00020;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.calendar-selected {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}


/* MY PAGE */
.card-nav-item {
    @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors cursor-pointer;
}
.card-nav-item.active {
    @apply bg-blue-50 text-blue-700;
}
.card-nav-item:not(.active) {
    @apply text-gray-600 hover:bg-gray-100 hover:text-gray-900;
}
.status-badge {
    @apply px-2 py-1 text-xs font-bold rounded-full uppercase;
}
.status-confirmed { @apply bg-green-100 text-green-700; }
.status-pending { @apply bg-yellow-100 text-yellow-700; }
.status-cancelled { @apply bg-red-100 text-red-700; }
.act_as_button {
    cursor: pointer;
    border: 3px solid var(--ccj-yellow);
    border-radius: 4px;
    padding: 4px 8px;
    background: var(--ccj-yellow-light);
}
.act_as_button:hover {
    border: 3px solid var(--ccj-yellow-dark);
}