/* ==========================================================================
   Family Massage - Base & Header Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --fm-bg-cream: #f7f4ee;
    --fm-green-dark: #1d3c2c;
    --fm-green-leaf: #2b543d;
    --fm-bronze: #b47b48;
    --fm-bronze-hover: #a06b3a;
    --fm-text-dark: #3a3731;
    --fm-text-muted: #7d756b;
    --fm-white: #ffffff;
    --fm-font-serif: "Playfair Display", Georgia, serif;
    --fm-font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

body {
    font-family: var(--fm-font-sans);
    background-color: var(--fm-bg-cream);
    color: var(--fm-text-dark);
    line-height: 1.6;
}

p {
    font-family: var(--fm-font-sans);
}

/* ==========================================================================
   Header Navigation
   ========================================================================== */

.site-header {
    background-color: var(--fm-bg-cream);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 2rem;
}

/* Brand / Logo */
.site-branding {
    display: flex;
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background-color: var(--fm-green-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fm-white);
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: var(--fm-font-serif);
    font-size: 1.38rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.brand-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--fm-text-muted);
    margin-top: 2px;
}

/* Main Navigation */
.main-navigation {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.2rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-menu li a {
    color: var(--fm-text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 0.25s ease;
    padding: 0.4rem 0;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a {
    color: var(--fm-bronze);
}

/* Header Language Switcher */
.header-action {
    display: flex;
    align-items: center;
}

.header-lang-switcher {
    position: relative;
    display: inline-block;
}

.btn-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.65rem 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}

.btn-lang-toggle:hover {
    background-color: var(--fm-bronze-hover);
}

.btn-lang-toggle .lang-flag {
    font-size: 1.05rem;
    line-height: 1;
}

.btn-lang-toggle .lang-chevron {
    transition: transform 0.2s ease;
}

.header-lang-switcher.open .lang-chevron {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 195px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    display: none;
    z-index: 999;
}

.header-lang-switcher.open .lang-dropdown-menu {
    display: block;
    animation: fmLangFade 0.18s ease-out;
}

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

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--fm-charcoal, #2c3338);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.lang-dropdown-item:hover {
    background-color: #f7f5f2;
    color: var(--fm-bronze);
}

.lang-dropdown-item.active {
    background-color: #f3efe9;
    color: var(--fm-bronze);
    font-weight: 600;
}

.lang-dropdown-item .lang-check {
    margin-left: auto;
    color: var(--fm-bronze);
    font-weight: 700;
}

/* Mobile Language Switcher */
.mobile-lang-switcher {
    width: 100%;
    padding-top: 10px;
}

.mobile-lang-label {
    font-size: 0.82rem;
    color: var(--fm-text-muted, #8c8f94);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.mobile-lang-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-mobile-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f7f5f2;
    border: 1px solid #e5e0d8;
    border-radius: 4px;
    color: var(--fm-charcoal, #2c3338);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-mobile-lang.active {
    background: var(--fm-bronze);
    color: #fff;
    border-color: var(--fm-bronze);
    font-weight: 600;
}

/* Hide Google Translate top banner & elements */
#google_translate_element {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate:first-child,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-reservation {
    display: inline-block;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.75rem 1.6rem;
    border-radius: 0;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-reservation:hover {
    background-color: var(--fm-bronze-hover);
    transform: translateY(-1px);
}

/* ==========================================================================
   Mobile Menu & Responsiveness
   ========================================================================== */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 26px;
    height: 2px;
    background-color: var(--fm-green-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    height: calc(100vh - 85px);
    background-color: var(--fm-bg-cream);
    z-index: 999;
    padding: 2rem;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-nav-menu {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mobile-nav-menu li a {
    color: var(--fm-text-dark);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 400;
    display: block;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: color 0.25s ease;
}

.mobile-nav-menu li a:hover,
.mobile-nav-menu li.current-menu-item > a {
    color: var(--fm-bronze);
}

.mobile-menu-action .btn-reservation {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0.85rem;
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 1.4rem;
    }
}

@media (max-width: 900px) {
    .main-navigation,
    .header-action {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
    background-color: var(--fm-bg-cream);
    padding-top: 3.5rem;
    overflow: hidden;
}

.hero-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem 5rem 2rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
    align-items: center;
}

.hero-content {
    max-width: 660px;
}

.hero-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.hero-title {
    font-family: var(--fm-font-serif);
    font-size: 2.9rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.hero-description {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: #55514a;
    line-height: 1.65;
    margin-bottom: 2rem;
}

/* Features checklist */
.hero-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 1.75rem;
    margin-bottom: 2.5rem;
    list-style: none;
    padding: 0;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 400;
    color: #4a463f;
    line-height: 1.4;
}

.hero-features li svg {
    color: #8c8479;
    flex-shrink: 0;
}

/* Action Buttons */
.hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-hero-primary {
    display: inline-block;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.85rem 1.8rem;
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-hero-primary:hover {
    background-color: var(--fm-bronze-hover);
    transform: translateY(-1px);
}

.btn-hero-secondary {
    display: inline-block;
    background-color: var(--fm-white);
    color: var(--fm-text-dark);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.85rem 1.8rem;
    border: 1px solid #dfd9ce;
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-hero-secondary:hover {
    background-color: #fcfbfa;
    border-color: #c9c1b4;
}

/* Hero Right Image & Frame */
.hero-image-col {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.hero-image-frame::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -24px;
    width: 60%;
    height: 60%;
    border-top: 1px solid #cfc7ba;
    border-left: 1px solid #cfc7ba;
    pointer-events: none;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Hero Stats Bar
   ========================================================================== */

.hero-stats-bar {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    width: 100%;
}

.stats-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    padding: 2.2rem 1.5rem;
    text-align: center;
    border-right: 1px solid #ebe6dc;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-item:last-child {
    border-right: none;
}

.stat-value {
    font-family: var(--fm-font-serif);
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1.1;
}

.stat-label {
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--fm-text-muted);
}

/* Responsive Hero */
@media (max-width: 1024px) {
    .hero-container {
        gap: 3rem;
    }

    .hero-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        padding: 1rem 1.5rem 3.5rem 1.5rem;
        gap: 3rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.4rem;
    }

    .hero-image-col {
        justify-content: center;
    }

    .hero-image-frame {
        max-width: 420px;
    }

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

    .stat-item:nth-child(2) {
        border-right: none;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-bottom: 1px solid #ebe6dc;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        text-align: center;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid #ebe6dc;
        padding: 1.5rem 1rem;
    }

    .stat-item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   About Section
   ========================================================================== */

.about-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 6.5rem 2rem;
}

.about-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    align-items: center;
}

.about-image-col {
    display: flex;
    justify-content: center;
}

.about-image-wrapper {
    width: 100%;
    max-width: 520px;
}

.about-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.about-content {
    max-width: 560px;
}

.about-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.about-title {
    font-family: var(--fm-font-serif);
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.about-description {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: #55514a;
    line-height: 1.7;
    margin-bottom: 2.25rem;
}

/* Feature items with icon box */
.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.about-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.feature-box-icon {
    width: 48px;
    height: 48px;
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fm-green-dark);
    flex-shrink: 0;
}

.feature-box-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feature-item-title {
    font-family: var(--fm-font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1.3;
}

.feature-item-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.55;
}

/* About Action Button */
.about-action {
    display: flex;
}

.btn-about-outline {
    display: inline-block;
    background-color: var(--fm-bg-cream);
    color: var(--fm-text-dark);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.85rem 1.8rem;
    border: 1px solid #dfd9ce;
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-about-outline:hover {
    background-color: #fcfbfa;
    border-color: #c9c1b4;
}

/* Responsive About */
@media (max-width: 1024px) {
    .about-container {
        gap: 3.5rem;
    }

    .about-title {
        font-size: 2.3rem;
    }
}

@media (max-width: 900px) {
    .about-section {
        padding: 4.5rem 1.5rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-content {
        max-width: 100%;
    }

    .about-image-wrapper {
        max-width: 440px;
    }
}

@media (max-width: 576px) {
    .about-title {
        font-size: 2rem;
    }

    .btn-about-outline {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Services Section
   ========================================================================== */

.services-section {
    background-color: var(--fm-bg-cream);
    padding: 6.5rem 2rem;
}

.services-container {
    max-width: 1320px;
    margin: 0 auto;
}

.services-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 4rem auto;
}

.services-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.services-title {
    font-family: var(--fm-font-serif);
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.services-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.65;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.service-card {
    background-color: var(--fm-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.service-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.service-card:hover .service-img {
    transform: scale(1.03);
}

.card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
    z-index: 2;
}

/* Card Body */
.service-card-body {
    padding: 1.75rem 1.75rem 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-name {
    font-family: var(--fm-font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    margin-bottom: 0.65rem;
    line-height: 1.25;
}

.service-description {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    min-height: 42px;
}

/* Duration Pills */
.service-durations {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.duration-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--fm-font-sans);
    font-size: 0.76rem;
    font-weight: 400;
    color: #55514a;
    border: 1px solid #dfd9ce;
    background-color: var(--fm-white);
    padding: 0.35rem 0.7rem;
}

.duration-pill.active {
    background-color: var(--fm-green-dark);
    border-color: var(--fm-green-dark);
    color: var(--fm-white);
}

.duration-pill svg {
    flex-shrink: 0;
}

/* Price Row */
.service-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: auto;
}

.price-label {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 400;
    color: #7d756b;
}

.price-value {
    font-family: var(--fm-font-serif);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    letter-spacing: -0.01em;
}

/* Action Buttons */
.service-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-service-order {
    display: block;
    text-align: center;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.25s ease;
}

.btn-service-order:hover {
    background-color: var(--fm-bronze-hover);
}

.btn-service-detail {
    display: block;
    text-align: center;
    background-color: var(--fm-white);
    color: var(--fm-text-dark);
    border: 1px solid #dfd9ce;
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-service-detail:hover {
    background-color: #fcfbfa;
    border-color: #c9c1b4;
}

/* Bottom CTA */
.services-action-bottom {
    display: flex;
    justify-content: center;
}

.btn-services-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--fm-green-dark);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.9rem 2.2rem;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-services-all:hover {
    background-color: #142a1f;
    transform: translateY(-1px);
}

/* Responsive Services */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 4.5rem 1.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-title {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   Why Us / Keunggulan Section
   ========================================================================== */

.why-us-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 6rem 2rem 7rem 2rem;
}

.why-us-container {
    max-width: 1320px;
    margin: 0 auto;
}

.why-us-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem auto;
}

.why-us-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.why-us-title {
    font-family: var(--fm-font-serif);
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Why Us Cards Grid */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.why-us-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-us-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.why-us-icon {
    color: var(--fm-bronze);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

.why-us-card-title {
    font-family: var(--fm-font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1.3;
    margin-bottom: 0.85rem;
}

.why-us-card-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.6;
}

/* Responsive Why Us */
@media (max-width: 1024px) {
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .why-us-section {
        padding: 4.5rem 1.5rem;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .why-us-title {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   How To Order / Cara Reservasi Section
   ========================================================================== */

.how-to-order-section {
    background-color: var(--fm-bg-cream);
    padding: 6.5rem 2rem 7rem 2rem;
}

.how-to-order-container {
    max-width: 1320px;
    margin: 0 auto;
}

.how-to-order-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 4.5rem auto;
}

.how-to-order-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.how-to-order-title {
    font-family: var(--fm-font-serif);
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Steps Grid */
.how-to-order-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 4.5rem;
}

.step-card {
    display: flex;
    flex-direction: column;
}

.step-number {
    font-family: var(--fm-font-serif);
    font-size: 3.2rem;
    font-weight: 400;
    color: #8da696;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.step-title {
    font-family: var(--fm-font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.step-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.6;
}

/* Action Button */
.how-to-order-action {
    display: flex;
    justify-content: center;
}

.btn-how-to-order {
    display: inline-block;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.85rem 2.2rem;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-how-to-order:hover {
    background-color: var(--fm-bronze-hover);
    transform: translateY(-1px);
}

/* Responsive How To Order */
@media (max-width: 1024px) {
    .how-to-order-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 640px) {
    .how-to-order-section {
        padding: 4.5rem 1.5rem;
    }

    .how-to-order-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .how-to-order-title {
        font-size: 2.1rem;
    }

    .step-number {
        font-size: 2.6rem;
        margin-bottom: 0.75rem;
    }
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */

.testimonials-section {
    background-color: var(--fm-white);
    padding: 6.5rem 2rem 7rem 2rem;
    overflow: hidden;
    border-top: 1px solid #ebe6dc;
}

.testimonials-container {
    max-width: 1320px;
    margin: 0 auto;
}

.testimonials-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 4rem auto;
}

.testimonials-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.testimonials-title {
    font-family: var(--fm-font-serif);
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.testimonials-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: #666158;
    line-height: 1.65;
}

/* Slider wrapper */
.testimonials-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}

.testimonials-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.testimonials-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4rem) / 3);
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.testimonial-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.testimonial-stars {
    color: var(--fm-bronze);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 1.25rem;
}

.testimonial-quote {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: #4a463f;
    line-height: 1.7;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ebe6dc;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: var(--fm-green-dark);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-family: var(--fm-font-sans);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    margin: 0;
    line-height: 1.2;
}

.author-meta {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 400;
    color: #7d756b;
    margin-top: 0.25rem;
}

/* Nav controls */
.testimonials-nav-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-testimonial-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--fm-bg-cream);
    border: 1px solid #dfd9ce;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fm-text-dark);
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-testimonial-nav:hover {
    background-color: var(--fm-green-dark);
    border-color: var(--fm-green-dark);
    color: var(--fm-white);
}

/* Responsive Testimonials */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-auto-columns: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 4.5rem 1.5rem;
    }

    .testimonials-grid {
        grid-auto-columns: 88%;
        gap: 1.25rem;
    }

    .testimonials-title {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   Service Area Section
   ========================================================================== */
.service-area-section {
    background-color: var(--fm-bg-cream);
    padding: 6.5rem 2rem;
    border-top: 1px solid #ebe6dc;
}

.service-area-container {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.service-area-header {
    margin-bottom: 2.5rem;
}

.service-area-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.service-area-title {
    font-family: var(--fm-font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0;
    line-height: 1.25;
}

.service-area-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.service-area-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.city-badge {
    background-color: var(--fm-white);
    border: 1px solid #e2ddd3;
    color: #38342e;
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.65rem 1.45rem;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.city-badge:hover {
    border-color: var(--fm-bronze);
    color: var(--fm-green-dark);
}

.service-area-note {
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    color: #7d756b;
    margin: 0 0 2.25rem 0;
    line-height: 1.6;
}

.service-area-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-service-area-primary {
    background-color: var(--fm-green-dark);
    color: var(--fm-white);
    border: 1px solid var(--fm-green-dark);
    padding: 0.95rem 1.85rem;
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-service-area-primary:hover {
    background-color: var(--fm-green-leaf, #2b543d);
    border-color: var(--fm-green-leaf, #2b543d);
    color: var(--fm-white);
}

.btn-service-area-secondary {
    background-color: var(--fm-white);
    color: #2b2723;
    border: 1px solid #d9d3c7;
    padding: 0.95rem 1.85rem;
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-service-area-secondary:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
}

@media (max-width: 768px) {
    .service-area-section {
        padding: 4.5rem 1.5rem;
    }

    .service-area-title {
        font-size: 2.1rem;
    }

    .service-area-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-service-area-primary,
    .btn-service-area-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
    background-color: var(--fm-green-dark);
    padding: 7.5rem 2rem;
    text-align: center;
}

.cta-container {
    max-width: 820px;
    margin: 0 auto;
}

.cta-title {
    font-family: var(--fm-font-serif);
    font-size: 3rem;
    font-weight: 400;
    color: var(--fm-white);
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
    letter-spacing: -0.01em;
}

.cta-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 1.05rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 2.5rem auto;
}

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

.btn-cta {
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    display: inline-block;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-cta:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta-section {
        padding: 5rem 1.5rem;
    }

    .cta-title {
        font-size: 2.15rem;
    }

    .cta-subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .btn-cta {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.site-footer {
    background-color: #172d23;
    color: #9fb0a8;
    padding-top: 5.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3.5rem;
    padding-bottom: 5rem;
}

.footer-branding {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.footer-branding .brand-icon {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--fm-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-branding .brand-title {
    color: var(--fm-white);
    font-family: var(--fm-font-serif);
    font-size: 1.38rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.footer-branding .brand-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--fm-font-sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-top: 2px;
}

.footer-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #a3b3ac;
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 360px;
}

.footer-tagline {
    font-family: var(--fm-font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #cad8d1;
    line-height: 1.4;
    margin: 0;
}

.footer-col-title {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--fm-white);
    margin-top: 0;
    margin-bottom: 1.75rem;
    text-transform: uppercase;
}

.footer-links,
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-links a {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #a3b3ac;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--fm-white);
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #a3b3ac;
}

.footer-contact-list li a {
    color: #a3b3ac;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-list li a:hover {
    color: var(--fm-white);
}

.contact-icon {
    color: #a3b3ac;
    flex-shrink: 0;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.75rem 0;
}

.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy,
.footer-disclaimer {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #798d84;
    margin: 0;
}

/* Floating Actions */
.floating-actions {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    z-index: 999;
}

.floating-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.2s ease;
    text-decoration: none;
    border: none;
}

.floating-btn:hover {
    transform: translateY(-3px);
}

.floating-btn.scroll-top {
    background-color: var(--fm-white);
    color: var(--fm-green-dark);
}

.floating-btn.floating-wa {
    background-color: #172d23;
    color: var(--fm-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding-top: 4.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }

    .floating-actions {
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

/* ==========================================================================
   Service Area Page
   ========================================================================== */
.service-area-page-main {
    background-color: var(--fm-bg-cream);
    min-height: 100vh;
}

.sap-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero / Header */
.sap-hero-section {
    background-color: var(--fm-bg-cream);
    padding-top: 5.5rem;
    padding-bottom: 4.5rem;
}

.sap-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.sap-title {
    font-family: var(--fm-font-serif);
    font-size: 2.85rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0 0 1.25rem 0;
    line-height: 1.2;
}

.sap-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #6d665c;
    max-width: 680px;
    line-height: 1.65;
    margin: 0;
}

/* Regions Section */
.sap-regions-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 5.5rem 0;
}

.sap-regions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.sap-region-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 2.25rem 2.25rem 1.5rem 2.25rem;
    display: flex;
    flex-direction: column;
}

.sap-region-title {
    font-family: var(--fm-font-serif);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0 0 0.45rem 0;
}

.sap-region-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #7d756b;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.sap-city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sap-city-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-top: 1px solid #ebe6dc;
}

.sap-city-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sap-pin-icon {
    color: #8fa89b;
    flex-shrink: 0;
}

.sap-city-name {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: #38342e;
}

.btn-check-availability {
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: #2b2723;
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 1.15rem;
    text-decoration: none;
    border-radius: 0;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.btn-check-availability:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
    background-color: #faf8f5;
}

/* Notice Section */
.sap-notice-section {
    background-color: var(--fm-bg-cream);
    padding: 4.5rem 0 5.5rem 0;
}

.sap-notice-box {
    background-color: var(--fm-white);
    border-left: 3px solid var(--fm-bronze);
    border-top: 1px solid #ebe6dc;
    border-right: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 1.35rem 1.85rem;
}

.sap-notice-text {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 960px) {
    .sap-regions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sap-hero-section {
        padding-top: 4rem;
        padding-bottom: 2rem;
    }

    .sap-title {
        font-size: 2.15rem;
    }

    .sap-region-card {
        padding: 1.75rem 1.5rem 1rem 1.5rem;
    }

    .sap-city-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .btn-check-availability {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Testimonials Page
   ========================================================================== */
.testimonials-page-main {
    background-color: var(--fm-bg-cream);
    min-height: 100vh;
}

.tp-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.tp-hero-section {
    background-color: var(--fm-bg-cream);
    padding-top: 5.5rem;
    padding-bottom: 4rem;
}

.tp-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.tp-title {
    font-family: var(--fm-font-serif);
    font-size: 2.85rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0 0 2.25rem 0;
    line-height: 1.2;
}

.tp-stats-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.tp-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tp-stat-score {
    font-family: var(--fm-font-serif);
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1;
}

.tp-stat-rating-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tp-stat-stars {
    color: var(--fm-bronze);
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.tp-stat-label {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #7d756b;
}

.tp-stat-divider {
    width: 1px;
    height: 42px;
    background-color: #dfd9ce;
}

.tp-stat-number {
    font-family: var(--fm-font-serif);
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1;
}

.tp-stat-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #7d756b;
}

/* Grid & Filter Section */
.tp-grid-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 5.5rem 0 5rem 0;
}

.tp-filters-wrapper {
    margin-bottom: 3.5rem;
}

.tp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.tp-filter-btn {
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: #38342e;
    padding: 0.65rem 1.25rem;
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tp-filter-btn:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
}

.tp-filter-btn.active {
    background-color: var(--fm-green-dark);
    border-color: var(--fm-green-dark);
    color: var(--fm-white);
}

.tp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.85rem;
    margin-bottom: 3rem;
}

.tp-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.tp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.tp-card.hidden {
    display: none;
}

.tp-card-stars {
    color: var(--fm-bronze);
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 1.25rem;
}

.tp-card-stars .star-empty {
    color: #c9bfb1;
}

.tp-card-quote {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #4a463f;
    line-height: 1.7;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.tp-card-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.4rem;
    border-top: 1px solid #ebe6dc;
}

.tp-author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: var(--fm-green-dark);
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-author-info {
    display: flex;
    flex-direction: column;
}

.tp-author-name {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    margin: 0;
    line-height: 1.2;
}

.tp-author-meta {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    color: #7d756b;
    margin-top: 0.25rem;
    display: block;
}

.tp-disclaimer-note {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #8a8377;
    text-align: left;
    margin: 0;
}

/* Bottom CTA Section */
.tp-cta-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0 6rem 0;
}

.tp-cta-box {
    background-color: var(--fm-white);
    border: 1px solid #ebe6dc;
    padding: 4.5rem 2rem;
    text-align: center;
    max-width: 1060px;
    margin: 0 auto;
}

.tp-cta-title {
    font-family: var(--fm-font-serif);
    font-size: 2.35rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0 0 2rem 0;
}

.btn-tp-cta {
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.95rem 2.25rem;
    text-decoration: none;
    border-radius: 0;
    display: inline-block;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-tp-cta:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .tp-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tp-hero-section {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    .tp-title {
        font-size: 2.15rem;
    }

    .tp-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .tp-stat-divider {
        display: none;
    }

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

    .tp-cta-box {
        padding: 3rem 1.5rem;
    }

    .tp-cta-title {
        font-size: 1.85rem;
    }

    .btn-tp-cta {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   About Page
   ========================================================================== */
.about-page-main {
    background-color: var(--fm-bg-cream);
    min-height: 100vh;
}

.ap-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ap-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.ap-title {
    font-family: var(--fm-font-serif);
    font-size: 2.85rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
}

/* Section 1: Hero Section (Cream) */
.ap-hero-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0 3.5rem 0;
}

.ap-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #6d665c;
    max-width: 680px;
    line-height: 1.7;
    margin: 0;
}

/* Section 2: Vision Section (White) */
.ap-vision-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 5.5rem 0;
}

.ap-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4.5rem;
    align-items: center;
}

.ap-vision-image-wrap {
    overflow: hidden;
}

.ap-vision-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid #ebe6dc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ap-vision-content {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.ap-item-title {
    font-family: var(--fm-font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    margin: 0 0 0.55rem 0;
}

.ap-item-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #666158;
    line-height: 1.7;
    margin: 0;
}

/* Section 3: Hygiene Section (Cream) */
.ap-hygiene-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0;
}

.ap-hygiene-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}

.ap-hygiene-content .ap-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #666158;
    line-height: 1.7;
    margin-top: 1.25rem;
    max-width: 480px;
}

.ap-hygiene-image-wrap {
    overflow: hidden;
}

.ap-hygiene-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid #ebe6dc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Section 4: Values Section (White) */
.ap-values-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    padding: 5.5rem 0 6rem 0;
    text-align: center;
}

.ap-values-header {
    margin-bottom: 2rem;
}

.ap-badges-wrap {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}

.ap-badge {
    background-color: var(--fm-bg-cream);
    border: 1px solid #dfd9ce;
    color: #38342e;
    padding: 0.65rem 1.45rem;
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    font-weight: 500;
}

.ap-legality-box {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 2.25rem 2rem;
    max-width: 780px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ap-legality-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
}

.ap-legality-label {
    font-family: var(--fm-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #7d756b;
    text-transform: uppercase;
}

.ap-legality-value {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fm-green-dark);
}

.ap-legality-divider {
    width: 1px;
    height: 42px;
    background-color: #dfd9ce;
}

.ap-legality-disclaimer {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #8a8377;
    margin: 0 0 2.5rem 0;
}

.btn-ap-services {
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.95rem 2.25rem;
    text-decoration: none;
    border-radius: 0;
    display: inline-block;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-ap-services:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
    transform: translateY(-2px);
}

@media (max-width: 960px) {
    .ap-vision-grid,
    .ap-hygiene-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ap-legality-box {
        flex-direction: column;
        gap: 1.5rem;
    }

    .ap-legality-divider {
        display: none;
    }
}

@media (max-width: 640px) {
    .ap-hero-section {
        padding-top: 4rem;
        padding-bottom: 2.5rem;
    }

    .ap-title {
        font-size: 2.15rem;
    }

    .ap-vision-section,
    .ap-hygiene-section,
    .ap-values-section {
        padding: 4rem 0;
    }

    .btn-ap-services {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   How to Order Page
   ========================================================================== */
.how-to-order-page-main {
    background-color: var(--fm-bg-cream);
    min-height: 100vh;
}

.htop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.htop-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.htop-title {
    font-family: var(--fm-font-serif);
    font-size: 2.85rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
}

/* Section 1: Steps Section (Cream) */
.htop-steps-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0 5rem 0;
}

.htop-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #6d665c;
    max-width: 680px;
    line-height: 1.7;
    margin: 0 0 3.5rem 0;
}

.htop-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.85rem;
}

.htop-step-card {
    background-color: var(--fm-white);
    border: 1px solid #ebe6dc;
    padding: 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.htop-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.htop-step-num {
    font-family: var(--fm-font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    color: #8fa89b;
    margin-bottom: 1rem;
    display: block;
}

.htop-step-title {
    font-family: var(--fm-font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    margin: 0 0 0.6rem 0;
    line-height: 1.35;
}

.htop-step-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    line-height: 1.6;
    margin: 0;
}

/* Section 2: Reservation Simulation Section (White) */
.htop-sim-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 5.5rem 0;
}

.htop-sim-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.htop-sim-content {
    max-width: 620px;
}

.htop-sim-content .htop-title {
    font-size: 2.35rem;
    margin-bottom: 1.25rem;
}

.htop-sim-content .htop-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #666158;
    line-height: 1.7;
    margin: 0;
}

.htop-sim-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-htop-primary {
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.95rem 1.85rem;
    text-decoration: none;
    border-radius: 0;
    display: inline-block;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-htop-primary:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
    transform: translateY(-2px);
}

.btn-htop-secondary {
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: #2b2723;
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.95rem 1.85rem;
    text-decoration: none;
    border-radius: 0;
    display: inline-block;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-htop-secondary:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
}

/* Section 3: FAQ Section (Cream) */
.htop-faq-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0 6.5rem 0;
}

.htop-faq-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.htop-faq-header .htop-title {
    margin: 0;
}

.htop-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ebe6dc;
}

.htop-faq-item {
    border-bottom: 1px solid #ebe6dc;
}

.htop-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--fm-font-serif);
    font-size: 1.18rem;
    color: var(--fm-green-dark);
    transition: color 0.2s ease;
}

.htop-faq-trigger:hover {
    color: var(--fm-bronze);
}

.htop-faq-icon {
    color: #7d756b;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.htop-faq-item.active .htop-faq-icon {
    transform: rotate(180deg);
}

.htop-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.htop-faq-item.active .htop-faq-content {
    max-height: 250px;
    padding-bottom: 1.4rem;
}

.htop-faq-answer {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    color: #666158;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px) {
    .htop-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .htop-steps-section {
        padding: 4rem 0 3rem 0;
    }

    .htop-steps-grid {
        grid-template-columns: 1fr;
    }

    .htop-sim-section {
        padding: 4rem 0;
    }

    .htop-sim-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .htop-sim-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-htop-primary,
    .btn-htop-secondary {
        width: 100%;
        text-align: center;
    }

    .htop-title {
        font-size: 2.15rem;
    }

    .htop-sim-content .htop-title {
        font-size: 1.95rem;
    }

    .htop-faq-section {
        padding: 4rem 0 5rem 0;
    }
}

/* ==========================================================================
   Service Page
   ========================================================================== */
.service-page-main {
    background-color: var(--fm-bg-cream);
    min-height: 100vh;
}

.sp-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sp-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.sp-title {
    font-family: var(--fm-font-serif);
    font-size: 2.85rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.25;
    margin: 0 0 1.25rem 0;
}

/* Section 1: Hero Section (Cream) */
.sp-hero-section {
    background-color: var(--fm-bg-cream);
    padding: 5.5rem 0 4rem 0;
}

.sp-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #6d665c;
    max-width: 680px;
    line-height: 1.7;
    margin: 0;
}

/* Section 2: Grid & Filter Section (White) */
.sp-grid-section {
    background-color: var(--fm-white);
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 5.5rem 0;
}

.sp-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.sp-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.sp-category-btn {
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: #38342e;
    padding: 0.6rem 1.25rem;
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-category-btn:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
}

.sp-category-btn.active {
    background-color: var(--fm-green-dark);
    border-color: var(--fm-green-dark);
    color: var(--fm-white);
}

.sp-search-wrap {
    position: relative;
    width: 260px;
}

.sp-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8fa89b;
    pointer-events: none;
}

.sp-search-input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    color: #38342e;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease;
}

.sp-search-input:focus {
    border-color: var(--fm-green-dark);
}

.sp-count-indicator {
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    color: #7d756b;
    margin: 0 0 2.5rem 0;
}

.sp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sp-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.sp-card.hidden {
    display: none;
}

.sp-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.sp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sp-card:hover .sp-card-img {
    transform: scale(1.03);
}

.sp-badge-popular {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 0.35rem 0.75rem;
    text-transform: uppercase;
    z-index: 2;
}

.sp-card-body {
    padding: 2rem 1.85rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sp-card-cat {
    font-family: var(--fm-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
}

.sp-card-title {
    font-family: var(--fm-font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    margin: 0 0 0.75rem 0;
    line-height: 1.25;
}

.sp-card-desc {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

.sp-durations {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.sp-duration-pill {
    padding: 0.35rem 0.8rem;
    font-family: var(--fm-font-sans);
    font-size: 0.78rem;
    border-radius: 20px;
    font-weight: 500;
    border: 1px solid #dfd9ce;
    color: #666158;
    background-color: var(--fm-white);
}

.sp-duration-pill.selected {
    background-color: var(--fm-green-dark);
    border-color: var(--fm-green-dark);
    color: var(--fm-white);
}

.sp-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ebe6dc;
}

.sp-price-prefix {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #7d756b;
}

.sp-price-value {
    font-family: var(--fm-font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--fm-green-dark);
}

.sp-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-sp-order {
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.btn-sp-order:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
}

.btn-sp-detail {
    background-color: var(--fm-white);
    border: 1px solid #dfd9ce;
    color: #2b2723;
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-sp-detail:hover {
    border-color: var(--fm-green-dark);
    color: var(--fm-green-dark);
}

/* Section 3: Notice Section (Cream) */
.sp-notice-section {
    background-color: var(--fm-bg-cream);
    padding: 5rem 0 6rem 0;
}

.sp-notice-box {
    background-color: var(--fm-white);
    border-left: 3px solid var(--fm-bronze);
    border-top: 1px solid #ebe6dc;
    border-right: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
    padding: 1.35rem 1.85rem;
    max-width: 1000px;
    margin: 0 auto;
}

.sp-notice-text {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .sp-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-services-grid {
        grid-template-columns: 1fr;
    }

    .sp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-search-wrap {
        width: 100%;
    }

    .sp-title {
        font-size: 2.15rem;
    }

    .sp-hero-section {
        padding: 4rem 0 3rem 0;
    }

    .sp-grid-section {
        padding: 4rem 0;
    }
}

/* ==========================================================================
   Detail Service Page Styles
   ========================================================================== */

.sd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Section 1: Main Detail Content (White Background) */
.sd-main-section {
    background-color: var(--fm-white);
    padding: 2.5rem 0 5rem 0;
}

.sd-back-nav {
    margin-bottom: 2rem;
}

.sd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sd-back-link:hover {
    color: var(--fm-green-dark);
}

.sd-grid {
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 3.5rem;
    align-items: start;
}

/* Left Column */
.sd-left-col {
    display: flex;
    flex-direction: column;
}

.sd-featured-img-wrap {
    width: 100%;
    margin-bottom: 2.5rem;
    border: 1px solid #ebe6dc;
    background-color: #faf7f2;
}

.sd-featured-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.sd-block {
    margin-bottom: 2.5rem;
}

.sd-block-title {
    font-family: var(--fm-font-serif);
    font-size: 1.55rem;
    color: var(--fm-green-dark);
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.sd-block-text {
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    line-height: 1.75;
    color: #5c554a;
    margin: 0;
}

.sd-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
    margin-top: 0.5rem;
}

.sd-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.sd-check-icon {
    color: var(--fm-green-dark);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}

.sd-benefit-text {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #5c554a;
    line-height: 1.5;
}

/* Info Cards Row */
.sd-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.sd-info-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    padding: 1.75rem;
}

.sd-info-card-title {
    font-family: var(--fm-font-serif);
    font-size: 1.15rem;
    color: var(--fm-green-dark);
    margin: 0 0 1.15rem 0;
    font-weight: 600;
}

.sd-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sd-info-list li {
    font-family: var(--fm-font-sans);
    font-size: 0.84rem;
    color: #625c53;
    line-height: 1.6;
}

/* FAQ Block */
.sd-faq-block {
    margin-bottom: 0;
}

.sd-faq-list {
    border-top: 1px solid #ebe6dc;
    margin-top: 1.25rem;
}

.sd-faq-item {
    border-bottom: 1px solid #ebe6dc;
}

.sd-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.15rem 0;
    background: transparent;
    border: none;
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sd-faq-trigger:hover {
    color: var(--fm-bronze);
}

.sd-faq-icon {
    transition: transform 0.3s ease;
    color: #8c857b;
    flex-shrink: 0;
}

.sd-faq-item.active .sd-faq-icon {
    transform: rotate(180deg);
    color: var(--fm-green-dark);
}

.sd-faq-content {
    display: none;
    padding-bottom: 1.25rem;
}

.sd-faq-item.active .sd-faq-content {
    display: block;
}

.sd-faq-content p {
    margin: 0;
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    line-height: 1.7;
    color: #625c53;
}

/* Right Column: Sticky Booking Card */
.sd-right-col {
    position: relative;
}

.sd-booking-card {
    position: sticky;
    top: 110px;
    background-color: var(--fm-white);
    border: 1px solid #ebe6dc;
    padding: 2rem 1.85rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.sd-booking-cat {
    font-family: var(--fm-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #9c9488;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.65rem;
}

.sd-booking-title {
    font-family: var(--fm-font-serif);
    font-size: 1.75rem;
    color: var(--fm-green-dark);
    margin: 0 0 0.65rem 0;
    line-height: 1.25;
    font-weight: 500;
}

.sd-booking-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.84rem;
    color: #726b60;
    line-height: 1.55;
    margin: 0 0 1.75rem 0;
}

.sd-durations-section {
    margin-bottom: 1.75rem;
}

.sd-durations-label {
    display: block;
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fm-green-dark);
    margin-bottom: 0.75rem;
}

.sd-durations-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sd-duration-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid #ebe6dc;
    background-color: var(--fm-white);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
}

.sd-duration-option:hover {
    border-color: #d1c8b8;
}

.sd-duration-option.selected {
    border-color: var(--fm-bronze);
    background-color: #faf7f2;
}

.sd-duration-radio {
    display: none;
}

.sd-duration-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    color: #3d3731;
    font-weight: 500;
}

.sd-duration-time svg {
    color: #8c857b;
}

.sd-duration-price {
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fm-green-dark);
}

.sd-active-price-wrap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ebe6dc;
}

.sd-price-label {
    font-family: var(--fm-font-sans);
    font-size: 0.82rem;
    color: #7d756b;
}

.sd-price-display {
    font-family: var(--fm-font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--fm-green-dark);
}

.btn-sd-book {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--fm-bronze);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.9rem 1.5rem;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.btn-sd-book:hover {
    background-color: var(--fm-bronze-hover);
    color: var(--fm-white);
}

/* Section 2: Related Services (Cream Background) */
.sd-related-section {
    background-color: var(--fm-bg-cream);
    border-top: 1px solid #ebe6dc;
    padding: 5rem 0 6rem 0;
}

.sd-related-title {
    font-family: var(--fm-font-serif);
    font-size: 2rem;
    color: var(--fm-green-dark);
    text-align: center;
    margin: 0 0 3rem 0;
    font-weight: 500;
}

.sd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .sd-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .sd-booking-card {
        position: static;
    }

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

@media (max-width: 768px) {
    .sd-featured-img {
        height: 280px;
    }

    .sd-benefits-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .sd-cards-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sd-related-grid {
        grid-template-columns: 1fr;
    }

    .sd-related-section {
        padding: 4rem 0 5rem 0;
    }
}

/* ==========================================================================
   Reservation Modal Popup Styles
   ========================================================================== */

body.modal-open {
    overflow: hidden;
}

.rm-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.rm-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(18, 28, 22, 0.72);
    z-index: 1;
    cursor: pointer;
}

.rm-container {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    pointer-events: none;
}

.rm-dialog {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #ebe6dc;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    overflow: hidden;
}

.rm-header {
    background-color: #f6f3ed;
    padding: 1.5rem 1.85rem;
    border-bottom: 1px solid #ebe6dc;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-shrink: 0;
}

.rm-header-text {
    flex: 1;
}

.rm-title {
    font-family: var(--fm-font-serif, 'Playfair Display', serif);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--fm-green-dark, #1c3a27);
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.rm-subtitle {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.88rem;
    color: #686156;
    line-height: 1.5;
    margin: 0;
}

.rm-close {
    background: transparent;
    border: none;
    color: #726b60;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.rm-close:hover {
    color: var(--fm-green-dark, #1c3a27);
}

.rm-body {
    padding: 1.75rem 1.85rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.reservation-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.rf-row {
    display: grid;
    gap: 1rem;
}

.rf-row-2 {
    grid-template-columns: 1fr 1fr;
}

.rf-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.rf-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.rf-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.rf-label {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: #2b2723;
}

.rf-share-loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fm-bronze, #a67c52);
    background-color: transparent;
    border: 1px solid var(--fm-bronze, #a67c52);
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.rf-share-loc-btn:hover {
    background-color: var(--fm-bronze, #a67c52);
    color: #ffffff;
}

.rf-share-loc-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.rf-share-loc-btn.is-success {
    background-color: #2e7d32;
    border-color: #2e7d32;
    color: #ffffff;
}

.rf-location-preview {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background-color: #f7f4ee;
    border: 1px solid #e7e0d3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    font-size: 0.8rem;
}

.rf-loc-info {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #3d352e;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-loc-link {
    color: var(--fm-bronze, #a67c52);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.rf-loc-link:hover {
    color: #2b2723;
}

.rf-map-wrapper {
    margin-top: 0.35rem;
    border: 1px solid #dfd9ce;
    background-color: #ffffff;
    overflow: hidden;
}

.rf-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.65rem;
    background-color: #f7f4ee;
    border-bottom: 1px solid #ebe5da;
}

.rf-map-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: #686156;
}

.rf-map-hint svg {
    color: var(--fm-bronze, #a67c52);
    flex-shrink: 0;
}

.rf-map-container {
    width: 100%;
    height: 220px;
    background-color: #e5e3df;
    position: relative;
    z-index: 1;
}

.rf-address-field-wrap {
    position: relative;
    width: 100%;
}

.rf-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid #dfd9ce;
    border-top: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.rf-autocomplete-item {
    padding: 0.65rem 0.85rem;
    font-size: 0.84rem;
    color: #332f2b;
    cursor: pointer;
    border-bottom: 1px solid #f4f0e8;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.rf-autocomplete-item:last-child {
    border-bottom: none;
}

.rf-autocomplete-item:hover,
.rf-autocomplete-item.active {
    background-color: #f7f3eb;
    color: var(--fm-green-dark, #2b3b33);
}

.rf-autocomplete-icon {
    color: var(--fm-bronze, #a67c52);
    flex-shrink: 0;
    margin-top: 2px;
}

.rf-autocomplete-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.rf-autocomplete-title {
    font-weight: 600;
    display: block;
    color: #2b2723;
}

.rf-autocomplete-sub {
    font-size: 0.76rem;
    color: #7d756b;
    display: block;
    margin-top: 2px;
}

.rf-autocomplete-loading,
.rf-autocomplete-empty {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.82rem;
    color: #8c8275;
}

.rf-control {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.88rem;
    color: #2b2723;
    background-color: #ffffff;
    border: 1px solid #dfd9ce;
    padding: 0.68rem 0.85rem;
    outline: none;
    border-radius: 0;
    transition: border-color 0.2s ease;
    appearance: auto;
}

.rf-control:focus {
    border-color: #a87b51;
}

.rf-control:disabled {
    background-color: #f7f5f0;
    color: #9c958c;
    cursor: not-allowed;
    border-color: #e6e0d6;
}

.rf-textarea {
    resize: vertical;
    line-height: 1.55;
}

.rf-summary-card {
    background-color: #f7f4ee;
    border: 1px solid #ebe6dc;
    padding: 1.35rem 1.6rem;
    margin-top: 0.5rem;
}

.rf-summary-heading {
    display: block;
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--fm-bronze, #a67c52);
    margin-bottom: 0.85rem;
    text-transform: uppercase;
}

.rf-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rf-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rf-summary-label {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.85rem;
    color: #726b60;
}

.rf-summary-value {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.85rem;
    color: #2b2723;
    font-weight: 500;
    text-align: right;
}

.rf-summary-divider {
    border-top: 1px solid #e8e3d8;
    margin: 0.85rem 0;
}

.rf-summary-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.65rem;
}

.rf-summary-price-label {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fm-green-dark, #1c3a27);
}

.rf-summary-price-value {
    font-family: var(--fm-font-serif, 'Playfair Display', serif);
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--fm-green-dark, #1c3a27);
}

.rf-summary-disclaimer {
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.76rem;
    color: #8c857b;
    margin: 0;
    line-height: 1.5;
}

.rf-action {
    margin-top: 0.35rem;
}

.btn-rf-submit {
    width: 100%;
    background-color: var(--fm-bronze, #a67c52);
    color: #ffffff;
    font-family: var(--fm-font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.95rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
    display: block;
}

.btn-rf-submit:hover {
    background-color: var(--fm-bronze-hover, #8f653d);
    color: #ffffff;
}

@media (max-width: 640px) {
    .rm-container {
        padding: 0.75rem;
    }

    .rm-dialog {
        max-height: 94vh;
    }

    .rm-header {
        padding: 1.25rem;
    }

    .rm-body {
        padding: 1.25rem;
    }

    .rf-row-2,
    .rf-row-3 {
        grid-template-columns: 1fr;
    }

    .rf-summary-card {
        padding: 1.15rem 1.25rem;
    }
}

/* ==========================================================================
   Articles Section (Homepage) & Article Detail Styles
   ========================================================================== */

.home-articles-section {
    background-color: #ffffff;
    padding: 6.5rem 2rem;
    border-top: 1px solid #ebe6dc;
}

.home-articles-container {
    max-width: 1320px;
    margin: 0 auto;
}

.home-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.home-articles-header-left {
    max-width: 680px;
}

.home-articles-tagline {
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.home-articles-title {
    font-family: var(--fm-font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--fm-green-dark);
    line-height: 1.25;
    margin-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

.home-articles-subtitle {
    font-family: var(--fm-font-sans);
    font-size: 0.95rem;
    color: #666158;
    line-height: 1.65;
    margin: 0;
}

.btn-articles-all {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: transparent;
    color: var(--fm-green-dark);
    border: 1.5px solid var(--fm-green-dark);
    padding: 0.85rem 1.65rem;
    font-family: var(--fm-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    border-radius: 0;
    white-space: nowrap;
}

.btn-articles-all:hover {
    background-color: var(--fm-green-dark);
    color: var(--fm-white);
    border-color: var(--fm-green-dark);
}

.btn-articles-all svg {
    transition: transform 0.25s ease;
}

.btn-articles-all:hover svg {
    transform: translateX(4px);
}

.home-articles-mobile-action {
    display: none;
}

/* 3 Cards in 1 Row Grid */
.home-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
}

.article-card {
    background-color: var(--fm-bg-cream);
    border: 1px solid #ebe6dc;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(29, 60, 44, 0.08);
    border-color: #dfd8cb;
}

.article-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background-color: #e5ded3;
    text-decoration: none;
}

.article-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.article-card:hover .article-card-img {
    transform: scale(1.05);
}

.article-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(29, 60, 44, 0.92);
    color: var(--fm-white);
    font-family: var(--fm-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    backdrop-filter: blur(4px);
}

.article-card-body {
    padding: 1.75rem 1.65rem 1.85rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fm-font-sans);
    font-size: 0.8rem;
    color: #877f73;
    margin-bottom: 0.75rem;
}

.meta-dot {
    color: #c7beaf;
}

.article-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.article-card-title {
    font-family: var(--fm-font-serif);
    font-size: 1.32rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
    color: var(--fm-green-dark);
}

.article-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-card-title a:hover {
    color: var(--fm-bronze);
}

.article-card-excerpt {
    font-family: var(--fm-font-sans);
    font-size: 0.88rem;
    color: #666158;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.article-card-footer {
    padding-top: 1.15rem;
    border-top: 1px solid #ebe6dc;
    display: flex;
    align-items: center;
}

.btn-article-read {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--fm-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fm-bronze);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.btn-article-read:hover {
    color: var(--fm-green-dark);
    gap: 0.7rem;
}

/* ==========================================================================
   Article Detail Page Styles (single.php)
   ========================================================================== */

.article-detail-main {
    background-color: var(--fm-bg-cream);
    padding: 2.5rem 0 6.5rem 0;
}

.article-detail-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.article-breadcrumb-nav {
    margin-bottom: 2rem;
}

.article-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    font-size: 0.85rem;
    color: #877f73;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.article-breadcrumbs a {
    color: #666158;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-breadcrumbs a:hover {
    color: var(--fm-green-dark);
}

.article-breadcrumbs .separator {
    color: #baa898;
}

.article-breadcrumbs .current {
    color: var(--fm-green-dark);
    font-weight: 500;
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-header {
    margin-bottom: 2.25rem;
}

.article-category-badge {
    display: inline-block;
    background-color: rgba(180, 123, 72, 0.12);
    color: var(--fm-bronze);
    border: 1px solid rgba(180, 123, 72, 0.3);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

.article-category-badge:hover {
    background-color: var(--fm-bronze);
    color: #ffffff;
}

.article-title {
    font-family: var(--fm-font-serif);
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    line-height: 1.22;
    margin-bottom: 1.5rem;
}

.article-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-top: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
}

.article-author-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.author-avatar-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--fm-green-dark);
    color: var(--fm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-details .author-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--fm-green-dark);
}

.author-details .publish-date {
    font-size: 0.8rem;
    color: #877f73;
}

.article-meta-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #666158;
}

.article-share-links {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.share-label {
    font-size: 0.8rem;
    color: #877f73;
    margin-right: 0.25rem;
}

.share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #dfd8cb;
    color: #666158;
    text-decoration: none;
    transition: all 0.2s ease;
}

.share-btn.share-wa:hover {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.share-btn.share-fb:hover {
    background-color: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

.share-btn.share-tw:hover {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
}

.article-featured-media {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    margin-bottom: 2.75rem;
    border: 1px solid #ebe6dc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.article-featured-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.article-content-body {
    background-color: #ffffff;
    padding: 3.5rem 3.5rem;
    border: 1px solid #ebe6dc;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #38342f;
}

.article-content-body p {
    margin-bottom: 1.6rem;
}

.article-content-body p.lead-text {
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--fm-green-dark);
    font-weight: 400;
}

.article-content-body h2 {
    font-family: var(--fm-font-serif);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    margin: 2.75rem 0 1rem 0;
    line-height: 1.3;
}

.article-content-body h3 {
    font-family: var(--fm-font-serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--fm-green-dark);
    margin: 2rem 0 0.85rem 0;
}

.article-highlight-box {
    background-color: #f7f4ee;
    border-left: 4px solid var(--fm-bronze);
    padding: 1.5rem 1.75rem;
    margin: 2.25rem 0;
    border-top: 1px solid #ebe6dc;
    border-right: 1px solid #ebe6dc;
    border-bottom: 1px solid #ebe6dc;
}

.highlight-badge {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.article-highlight-box p {
    margin: 0;
    color: #4a443b;
    font-size: 0.98rem;
    line-height: 1.65;
}

/* In-Article CTA Box */
.article-cta-box {
    background-color: var(--fm-green-dark);
    color: var(--fm-white);
    padding: 2.5rem;
    margin: 3.5rem 0 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.article-cta-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.article-cta-title {
    font-family: var(--fm-font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
    color: var(--fm-white);
    line-height: 1.3;
}

.article-cta-desc {
    font-size: 0.88rem;
    color: #cfd8d2;
    line-height: 1.6;
    margin: 0;
}

.article-cta-action {
    flex-shrink: 0;
}

.article-footer {
    margin-top: 3.5rem;
}

.article-author-card {
    background-color: #ffffff;
    border: 1px solid #ebe6dc;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2.25rem;
}

.author-card-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--fm-green-dark);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
}

.author-card-name {
    font-family: var(--fm-font-serif);
    font-size: 1.15rem;
    color: var(--fm-green-dark);
    margin: 0 0 0.35rem 0;
}

.author-card-bio {
    font-size: 0.88rem;
    color: #666158;
    line-height: 1.6;
    margin: 0;
}

.article-back-nav {
    text-align: center;
}

.btn-back-articles {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fm-green-dark);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 0.85rem 1.65rem;
    border: 1px solid #dfd8cb;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.btn-back-articles:hover {
    background-color: var(--fm-green-dark);
    color: #ffffff;
    border-color: var(--fm-green-dark);
}

.related-articles-section {
    padding-top: 4.5rem;
    margin-top: 4.5rem;
    border-top: 1px solid #ebe6dc;
}

.related-articles-container,
.related-articles-section .article-detail-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.related-articles-header {
    text-align: center;
    margin-bottom: 2.75rem;
}

.related-tagline {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fm-bronze);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.related-title {
    font-family: var(--fm-font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--fm-green-dark);
}

/* ==========================================================================
   Archive Articles Styles (archive.php)
   ========================================================================== */

.archive-articles-main {
    background-color: var(--fm-bg-cream);
    padding: 4.5rem 2rem 6.5rem 2rem;
}

.archive-articles-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem auto;
}

.no-articles-found {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.1rem;
    color: #666158;
    padding: 3rem;
}

/* Articles Pagination */
.articles-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e8e3dc;
    flex-wrap: wrap;
}

.articles-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fm-charcoal, #2c3338);
    background-color: #fff;
    border: 1px solid #dfd9d0;
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 6px;
}

.articles-pagination .page-numbers:hover {
    background-color: #f7f4ee;
    border-color: var(--fm-bronze);
    color: var(--fm-bronze);
    transform: translateY(-1px);
}

.articles-pagination .page-numbers.current {
    background-color: var(--fm-bronze);
    border-color: var(--fm-bronze);
    color: #fff;
    font-weight: 600;
    cursor: default;
    transform: none;
    box-shadow: 0 2px 6px rgba(184, 134, 11, 0.25);
}

.articles-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--fm-text-muted);
    min-width: auto;
    padding: 0 4px;
    cursor: default;
}

.articles-pagination .page-numbers.prev,
.articles-pagination .page-numbers.next {
    padding: 0 16px;
    font-weight: 500;
}

/* ==========================================================================
   Articles Responsive Media Queries
   ========================================================================== */

@media (max-width: 992px) {
    .home-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .article-content-body {
        padding: 2.5rem 2rem;
    }

    .article-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
    }

    .article-cta-action {
        width: 100%;
    }

    .article-cta-action .btn-reservation {
        display: block;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .home-articles-section {
        padding: 4.5rem 1.5rem;
    }

    .home-articles-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        margin-bottom: 2.5rem;
    }

    .home-articles-header-right {
        display: none;
    }

    .home-articles-mobile-action {
        display: block;
        margin-top: 2.25rem;
        text-align: center;
    }

    .btn-articles-all-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }

    .home-articles-title {
        font-size: 2.1rem;
    }

    .article-title {
        font-size: 2.1rem;
    }

    .article-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-meta-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .home-articles-grid {
        grid-template-columns: 1fr;
    }

    .article-content-body {
        padding: 1.85rem 1.25rem;
        font-size: 0.98rem;
    }

    .article-author-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1.25rem;
    }
}