input, select, textarea{ font-family: inherit;}


.massage-page.bg-body-pattern{ background: none;}
.massage-page .sidebar-col{ display: none;}
.massage-page .sidebar-layout-grid{ display: flex; flex-direction: column;}
.massage-page .page-hero-standard{ display: none;}
.massage-page .content-col{ background-color: transparent; padding: 0; box-shadow: none; border-radius: 0;}

.section-padding{ padding: 40px 0;}

h2 + .massage-description > img + h3{ margin-top: 0;}


.bd-appointment{ padding: 40px 15px; min-height: calc(100dvh - 164px); background-image: url("/assets/images/BackgroundPattern.png"); background-position: center; background-size: cover;}
.bd-appointment > div{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0;}
.bd-appointment > div h1{ font-size: 24px; font-weight: 400; text-align: center; margin-bottom: 30px;}

#section-service{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px;}

.bd-template-1{ color: #2C2C2C; background-color: #fff; border-radius: 8px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); padding: 20px; display: flex; flex-direction: column;}
.bd-template-1.v2{ border-radius: 0; box-shadow: none; padding: 0;}
.bd-template-1 > .h{ margin-bottom: 10px;}
.bd-template-1 > .h h2{ font-size: 16px; font-weight: 500;}
.bd-template-1 > .b{ display: block;}
.bd-template-1 > .b > div{ display: flex; flex-direction: column; gap: 12px;}
.bd-template-1 > .f{ margin-top: 15px;}
.bd-template-1 > .f > label{ margin-bottom: 5px;}
.bd-template-1 > .f > small{ font-size: 13px; font-style: italic; font-weight: 300; color: #000;}

.bd-template-2{ padding: 5px 12px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: all .2s ease; cursor: pointer;}
.bd-template-2.active{ background-color: var(--primary-green); color: #fff;}
.bd-template-2 > strong{ font-size: 15px; font-weight: 500;}
.bd-template-1.v2 .bd-template-2 > strong{ font-size: 14px;}
.bd-template-2 > div{ display: flex; flex-direction: column; gap: 3px; text-align: end; white-space: nowrap;}
.bd-template-2 > div > span{ font-weight: 400; font-size: 12px; line-height: 1;}
.bd-template-2 > div > span.active{ color: #008a00; transition: all .2s ease;}
.bd-template-2.active > div > span.active{ color: #34ff34;}
.bd-template-2 > div > span > span{ display: inline-block; width: 40px; min-width: 40px;}

.bd-template-3{ display: flex; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); border-radius: 6px; flex-direction: column; transition: all .2s ease;}
.bd-template-3:has(.active){ background-color: var(--primary-green); color: #fff;}
.bd-template-3 > .h{ width: 100%; display: flex; position: relative;}
.bd-template-3 > .h > button{ cursor: pointer; color: inherit; text-align: start;}
.bd-template-3 > .h > button:nth-child(1){ width: 100%; padding: 10px 40px 10px 10px; gap: 10px; display: flex; align-items: center; background-color: transparent; border: none; outline: none;}
.bd-template-3 > .h > button:nth-child(1) img{ width: 30px; min-width: 30px; transition: all .2s ease;}
.bd-template-3:has(.active) > .h > button:nth-child(1) img{ filter: brightness(0) invert(1);}
.bd-template-3 > .h > button:nth-child(1) strong{ font-size: 14px; font-weight: 500;}
.bd-template-3 > .h > button:nth-child(1) b{ font-size: 15px; font-weight: 600; display: inline-block; margin-left: auto;}
.bd-template-3 > .h > button:nth-child(2){ font-size: 15px; opacity: .75; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; background-color: transparent; border: none; outline: none; line-height: 1; display: flex;}
.bd-template-3 > .h > button:nth-child(2) i{ line-height: 1;}
.bd-template-3 > .b{ display: block;}
.bd-template-3 > .b > div{ padding: 5px 13px 15px;}
.bd-template-3 > .b > div p{ line-height: 1.5; font-size: 14px;}

.bd-template-1.v2 .bd-template-3 > .h > button:nth-child(1){ padding: 10px;}

.bd-template-4{ display: flex; flex-direction: column; gap: 10px; padding: 10px 15px 15px; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); border-radius: 6px; background-color: #fff;}
.bd-template-4 > a{ font-size: 16px; font-weight: 500;}
.bd-template-4 > p{ font-size: 14px; font-weight: 300;}
.bd-template-4 > a:nth-child(3){ font-size: 14px; font-weight: 400;}
.bd-template-4 > button{ width: 100%; padding: 10px; background-color: var(--primary-green); color: #fff; border: none; outline: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .2s ease; border: 1px solid var(--primary-green);}
.bd-template-4 > button:hover{ background-color: #fff; color: var(--primary-green);}

.bd-template-5{ background-color: #fff; border-radius: 8px; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); padding: 40px; max-width: 900px; margin-inline: auto; margin-top: 30px;}
.bd-template-5 > div{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px;}
.bd-template-5 > div > div:not(.line){ display: flex; flex-direction: column; align-items: center; text-align: center;}
.bd-template-5 > div > div h2{ font-size: 24px; font-weight: 500; color: #335c67; margin-bottom: 15px;}
.bd-template-5 > div > div p{ font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 20px; max-width: 350px;}
.bd-template-5 > div .line{ width: 2px; background-color: #335c67; opacity: .7; height: 100%;}
.bd-template-5 > div .f{ width: 100%; display: flex; flex-direction: column; gap: 5px; text-align: start; margin-bottom: 15px;}
.bd-template-5 > div .f label{ font-size: 14px; font-weight: 500; color: #333;}
.bd-template-5 > div .f label span{ color: #d9534f; margin-left: 2px;}
.bd-template-5 > div .f input{ width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px;}
.bd-template-5 > div .f input:focus{ border-color: var(--primary-green);}
.bd-template-5 > div button{ width: 100%; padding: 12px; border: none; border-radius: 0px; font-size: 16px; font-weight: 400; cursor: pointer; transition: all .2s ease;}
.bd-template-5 > div button.dark{ background-color: #335c67; color: #fff; margin-bottom: 10px;}
.bd-template-5 > div button.dark:hover{ opacity: .9;}
.bd-template-5 > div button.light{ background-color: #94b49f; color: #fff;}
.bd-template-5 > div button.light:hover{ opacity: .9;}
.bd-template-5 > div a{ font-size: 14px; color: #335c67; text-decoration: underline;}
.bd-template-5 > div .icon{ width: 80px; height: 80px; color: #94b49f; margin: 20px 0 35px; display: flex; align-items: center; justify-content: center;}

.bd-template-6{ background-color: #fff; border-radius: 8px; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); padding: 40px; max-width: 550px; margin-inline: auto; margin-top: 30px;}
.bd-template-6 > div{ display: flex; flex-direction: column; align-items: center; text-align: center;}
.bd-template-6 > div h2{ font-size: 24px; font-weight: 500; color: #335c67; margin-bottom: 25px;}
.bd-template-6 > div .icon{ width: 80px; height: 80px; color: #94b49f; margin-bottom: 30px; display: flex; align-items: center; justify-content: center;}
.bd-template-6 > div .f{ width: 100%; display: flex; flex-direction: column; gap: 5px; text-align: start; margin-bottom: 25px;}
.bd-template-6 > div .f label{ font-size: 14px; font-weight: 500; color: #333;}
.bd-template-6 > div .f label span{ color: #d9534f; margin-left: 2px;}
.bd-template-6 > div .f input{ width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px;}
.bd-template-6 > div button{ width: 100%; padding: 15px; border: none; border-radius: 0px; font-size: 16px; font-weight: 400; cursor: pointer; background-color: #335c67; color: #fff; margin-bottom: 15px;}
.bd-template-6 > div p{ font-size: 14px; color: #333;}
.bd-template-6 > div a{ font-size: 14px; color: #335c67; text-decoration: underline; font-weight: 500;}




.bd-wrapper-1{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.bd-wrapper-1 > div{ display: flex; flex-direction: column; gap: 20px;}

.bd-wrapper-2{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
.bd-wrapper-2 > p{ font-size: 16px;}

.bd-wrapper-3{ gap: 20px; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 800px; margin-inline: auto;}


.pregnant [data-pregnancy-safe="0"]{ opacity: .5; pointer-events: none; background-color: #ccc;}
body:has(.massage-services .svc-item.active) .spa-extra .bd-template-3,
body:has(.spa-services .svc-item.active) .massage-extra .bd-template-3,
.pregnant .massage-extra .bd-template-3{ opacity: .5; pointer-events: none; background-color: #ccc;}

/* Custom Checkbox */
.bd-chckbx { display: flex; align-items: center; cursor: pointer; position: relative; gap: 9px;}
.bd-chckbx > input{ --size: 16px; width: var(--size); height: var(--size);  border: none; outline: none; box-shadow: none; appearance: none;}
.bd-chckbx > input::before{ font-size: 13px; border: 1px solid #bbb; border-radius: 4px; content: '\f00c'; display: flex; font-family: 'Font Awesome 6 Free'; font-weight: 900; align-items: center; justify-content: center; width: var(--size); height: var(--size); position: relative; z-index: 2; color: transparent; transition: all .2s ease;}
.bd-chckbx > input:checked::before{ background-color: var(--primary-green); color: #fff; border-color: var(--primary-green);}
.bd-chckbx > span{ font-size: 14px;}

.bd-template-7{ background-color: #fff; border-radius: 8px; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); padding: 40px; max-width: 1100px; margin-inline: auto; margin-top: 30px; position: relative;}
.bd-template-7 .submit-btn{ width: 300px; padding: 15px; background-color: #335c67; color: #fff; border: none; border-radius: 50px; font-size: 16px; cursor: pointer; display: block; margin: 40px auto 0; font-weight: 500;}
.bd-template-7 .login-link{ font-size: 14px; color: #333; text-align: right; margin-top: 15px;}
.bd-template-7 .login-link a{ color: #335c67; text-decoration: underline; font-weight: 600;}

.bd-template-8{ display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: 40px;}
.bd-template-8 h3{ font-size: 22px; font-weight: 500; color: #335c67; margin-bottom: 25px; display: flex; align-items: center; gap: 8px;}
.bd-template-8 h3 i{ font-size: 18px; opacity: .6;}
.bd-template-8 h4{ font-size: 16px; font-weight: 600; color: #333; margin-bottom: 10px; margin-top: 15px;}
.bd-template-8 .f{ margin-bottom: 20px; display: flex; flex-direction: column; gap: 5px;}
.bd-template-8 .f label{ font-size: 14px; font-weight: 500; color: #333;}
.bd-template-8 .f label span{ color: #d9534f; margin-left: 2px;}
.bd-template-8 .f input{ width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px;}
.bd-template-8 .info-link{ font-size: 13px; color: #335c67; text-decoration: underline; display: inline-block; text-align: right; width: 100%; margin-bottom: 10px;}
.bd-template-8 .legal-text{ font-size: 11px; color: #888; line-height: 1.4; margin-top: 15px;}
.bd-template-8 .bd-chckbx{ margin-bottom: 12px; align-items: flex-start;}
.bd-template-8 .bd-chckbx span{ font-size: 13px; color: #333; line-height: 1.4;}

.bd-template-9{ background-color: #fff; border-radius: 8px; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1); padding: 40px; max-width: 1100px; margin-inline: auto; margin-top: 30px;}

/* --- Yeni Özet Layout --- */
.bd-review-layout{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start;}
.bd-review-left h3, .bd-review-right h3{ font-size: 18px; font-weight: 600; color: #335c67; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid #e8f0ee;}
.bd-review-left h3 i, .bd-review-right h3 i{ font-size: 16px;}

.bd-review-section{ margin-bottom: 22px;}
.bd-review-section h4{ font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;}

.bd-review-row{ display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5;}
.bd-review-row:last-child{ border-bottom: none;}
.bd-review-label{ font-size: 13px; color: #888; min-width: 130px; display: flex; align-items: center; gap: 6px; flex-shrink: 0;}
.bd-review-label i{ width: 14px; text-align: center; color: #335c67; opacity: .7;}
.bd-review-value{ font-size: 14px; color: #333; font-weight: 500;}

.bd-review-service-card{ background: linear-gradient(135deg, #335c67 0%, #2a4d56 100%); color: #fff; border-radius: 10px; padding: 16px 20px;}
.bd-review-service-name{ font-size: 16px; font-weight: 600; margin-bottom: 4px;}
.bd-review-service-meta{ font-size: 13px; opacity: .8;}

.bd-review-extra-item{ font-size: 14px; color: #555; padding: 5px 0; display: flex; align-items: center; gap: 7px;}
.bd-review-extra-item i{ color: #335c67; font-size: 12px;}

.bd-template-9 .f{ margin-bottom: 0; margin-top: 10px; display: flex; flex-direction: column; gap: 5px;}
.bd-template-9 .f label{ font-size: 14px; font-weight: 500; color: #333;}
.bd-template-9 .f input, .bd-template-9 textarea{ width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px;}
.bd-template-9 textarea{ height: 90px; resize: none;}

/* --- Fiyat Kutusu --- */
.bd-price-box{ background: #f8fafa; border: 1px solid #e0eae8; border-radius: 10px; padding: 22px; margin-bottom: 22px;}
.bd-price-row{ display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; color: #444;}
.bd-price-row span:first-child{ color: #555;}
.bd-price-row span:last-child{ font-weight: 500; color: #333;}
.bd-price-extra span:first-child{ color: #777; font-size: 13px;}
.bd-price-extra span:last-child{ color: #335c67; font-size: 13px;}
.bd-price-divider{ border: none; border-top: 1px dashed #ccc; margin: 10px 0;}
.bd-price-total{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; font-size: 18px; font-weight: 700; color: #335c67;}
.bd-price-note{ font-size: 12px; color: #999; margin-top: 12px; display: flex; align-items: center; gap: 5px; line-height: 1.4;}
.bd-price-note i{ color: #335c67; opacity: .6;}

/* --- Onay Kutusu --- */
.bd-review-confirm-box{ display: flex; flex-direction: column; gap: 16px;}
.bd-review-confirm-box .reserve-btn{ width: 100%; padding: 16px; background: linear-gradient(135deg, #335c67, #2a4d56); color: #fff; border: none; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all .3s; display: flex; align-items: center; justify-content: center; gap: 8px;}
.bd-review-confirm-box .reserve-btn:hover{ opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(51,92,103,.3);}
.bd-review-confirm-box .reserve-btn:disabled{ opacity: .6; cursor: not-allowed; transform: none;}
.bd-review-confirm-box .policy-text{ font-size: 12px; color: #999; text-align: center; line-height: 1.5;}
.bd-review-confirm-box .policy-text a{ color: #335c67; text-decoration: underline;}
.bd-review-confirm-box .bd-chckbx span{ font-size: 13px;}

/* --- Ekstra Tag --- */
.bd-extra-tag{ display: inline-block; background: #e8f4f0; color: #335c67; border: 1px solid #c5ddd8; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 500; margin: 2px 3px 2px 0;}
.bd-review-value .bd-extra-tag:first-child{ margin-left: 0;}

/* --- Kart Formu --- */
.bd-card-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.bd-template-9 .f{ margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px;}
.bd-template-9 .f label{ font-size: 13px; font-weight: 500; color: #555;}
.bd-template-9 .f input{ width: 100%; padding: 10px 13px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px; transition: border-color .2s;}
.bd-template-9 .f input:focus{ border-color: #335c67;}
.bd-template-9 textarea{ width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 14px; height: 90px; resize: none;}
.bd-payment-note{ font-size: 12px; color: #888; margin-bottom: 16px; line-height: 1.5;}


.mobile-randevu{ position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); padding: 10px; z-index: 9999;}
.mobile-randevu a{ width: 100%; padding: 10px; background-color: var(--primary-green); color: #fff; text-align: center; display: block;}

.header-top > a{ width: 100%; max-width: calc(100% - 40px); margin: 15px auto 0; text-align: center; justify-content: center; display: flex;}



@media (min-width: 992px) {
    .mobile-randevu,
    .header-top > a{ display: none;}
}

@media (max-width: 992px) {
    body:has(.mobile-randevu){ padding-bottom: 67px;}
    
    .bd-wrapper-1{ display: flex; flex-direction: column;}
    .bd-template-8{ grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
    .bd-review-layout{ grid-template-columns: 1fr; gap: 30px;}
    .bd-review-label{ min-width: 110px;}
    .bd-card-row{ grid-template-columns: 1fr 1fr;}

    .bd-template-5 > div{ display: flex; flex-direction: column;}

    .hero-buttons .btn{ padding: 10px;}
}
@media (max-width: 600px) {
    #section-service{ display: flex; flex-direction: column;}
}
@media (max-width: 668px) {
    .bd-wrapper-3{ display: flex; flex-direction: column;}
    .bd-template-8{ display: flex; flex-direction: column;}
}
@media (max-width: 400px) {
    .day{ padding: 6px !important;}
}



/* ============================================
   Masaj Listesi Sayfası (massages/index.php)
   ============================================ */
.sidebar-col p { color: var(--primary-green); line-height: 1.85; margin-bottom: 14px;}
.massage-benefit-list { list-style: disc; padding-left: 22px; margin: 8px 0 8px; color: var(--primary-green);}
.massage-benefit-list li { padding: 3px 0; line-height: 1.7;}
.massage-benefit-list li::marker { color: var(--primary-green);}
.massage-index-right-col { padding-top: 4px;}
.massage-index-list-heading { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 12px;}
.massage-index-links { list-style: disc; padding-left: 18px; margin: 0;}
.massage-index-links li { padding: 5px 0;}
.massage-index-links li::marker { color: var(--primary-green);}
.massage-index-links li a { color: var(--primary-green); text-decoration: none; font-weight: 600; font-size: 0.97rem; transition: color 0.2s;}
.massage-index-links li a:hover { color: var(--primary-dark); text-decoration: underline;}