/* =====================================================================
 * Cozy Corner Shkodër — component styles
 * Plain CSS (the Tailwind Play CDN scans HTML utilities but does not
 * compile @apply from external files), so brand values are inlined here.
 * Brand: gold #C5A880 / gold-dark #A9885F / coral #E8998D / charcoal #2B2420
 * =================================================================== */

:root {
    --gold: #C5A880;
    --gold-dark: #A9885F;
    --gold-light: #E4D3BC;
    --coral: #E8998D;
    --coral-soft: #F3C4BA;
    --charcoal: #2B2420;
    --brown: #4A3B33;
    --cream: #FBF8F3;
    --cream-2: #F4EDE2;
    --muted: #8A7A6E;
}

/* Alpine: hide elements until initialised */
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ---- Form inputs ---------------------------------------------------- */
.cc-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--gold-light);
    border-radius: 0.75rem;
    background: #fff;
    color: var(--charcoal);
    font-size: 0.95rem;
    transition: border-color .2s, box-shadow .2s;
}
.cc-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197, 168, 128, .2);
}

.footer-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(251, 248, 243, .18);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, .05);
    color: var(--cream);
    font-size: 0.95rem;
    transition: border-color .2s, background .2s;
}
.footer-input::placeholder { color: rgba(251, 248, 243, .45); }
.footer-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, .09);
}

/* ---- Calendar ------------------------------------------------------- */
.cal-nav {
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--gold-light);
    color: var(--brown);
    transition: background .2s, color .2s;
}
.cal-nav:hover:not(:disabled) { background: var(--gold); color: #fff; border-color: var(--gold); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Payment options ------------------------------------------------ */
.pay-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--gold-light);
    border-radius: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--charcoal);
    transition: border-color .2s, background .2s;
}
.pay-option:hover { border-color: var(--gold); background: var(--cream-2); }
.pay-option:has(input:checked) { border-color: var(--gold); background: rgba(243, 196, 186, .25); }

/* ---- Review links --------------------------------------------------- */
.review-link {
    font-size: .85rem; font-weight: 600;
    padding: .5rem 1.1rem;
    border-radius: 9999px;
    border: 1px solid var(--gold-light);
    color: var(--gold-dark);
    transition: background .2s, color .2s;
}
.review-link:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ---- Blog prose ----------------------------------------------------- */
.prose-cc { color: #3a322c; line-height: 1.8; font-size: 1.075rem; }
.prose-cc h2 { font-family: "Playfair Display", serif; font-size: 1.9rem; color: var(--charcoal); margin: 2.2rem 0 .9rem; }
.prose-cc h3 { font-family: "Playfair Display", serif; font-size: 1.45rem; color: var(--charcoal); margin: 1.8rem 0 .7rem; }
.prose-cc p { margin: 1rem 0; }
.prose-cc a { color: var(--gold-dark); text-decoration: underline; }
.prose-cc ul, .prose-cc ol { margin: 1rem 0 1rem 1.4rem; }
.prose-cc ul { list-style: disc; }
.prose-cc ol { list-style: decimal; }
.prose-cc li { margin: .4rem 0; }
.prose-cc blockquote {
    border-left: 3px solid var(--gold);
    padding-left: 1.2rem; margin: 1.4rem 0;
    color: var(--muted); font-style: italic;
}
.prose-cc code { background: var(--cream-2); padding: .15rem .4rem; border-radius: .35rem; font-size: .9em; }
.prose-cc hr { border: none; border-top: 1px solid var(--gold-light); margin: 2rem 0; }
.prose-cc img { border-radius: 1rem; margin: 1.5rem 0; }

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}