@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Inter', sans-serif;
}

body {
  background-color:  #690093;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: clamp(7.73vw, 7vw, 12.5vw);
}
.header-options {
    display: flex;
    justify-content: flex-start;
    gap: 3.5vw;
    margin-top: clamp(18.75px, 3.75vw, 26.25px);
}
.title {
    color: #FFFFFF;
    letter-spacing: -0.11em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(31.5px, 6.75vw, 72px);
    margin-left: clamp(5px, 7.75vw, 95px);
}
.title-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin-top: -4%;
    margin-top: clamp(25px, 5vw, 35px);
}
.title-ellipse {
    width: clamp(276.609375px, 52.5vw, 600px);
    height: clamp(30.1875px, 6.75vw, 69px);
    border-radius: 100% 100% 100% 100%;
    background-color: #FFFFFF;
    opacity: 0.18;
    top: clamp(21px, 2.75vw, 65px);
}
.triangle-up {
    width: 0;
    height: 0;
    border-left: clamp(55px, 7.8vw, 100px) solid transparent;
    border-right: clamp(55px, 7.8vw, 100px) solid transparent;
    border-bottom: clamp(55px, 7.8vw, 100px) solid #FFFFFF;
    opacity: 0.18;
    margin-top: clamp(25px, 5vw, 35px);
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: clamp(55px, 7.8vw, 100px) solid transparent;
    border-right: clamp(55px, 7.8vw, 100px) solid transparent;
    border-top: clamp(55px, 7.8vw, 100px) solid #FFFFFF;
    opacity: 0.18;
    margin-top: clamp(25px, 5vw, 35px);
}
.triangle-text-about {
    position: absolute;
    top: 25%;
    left: 7%;
    color: #FFFFFF;
    letter-spacing: -0.11em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 6.75vw, 70px);
}
.triangle-text-contact {
    position: absolute;
    top: 25%;
    left: -4%;
    color: #FFFFFF;
    letter-spacing: -0.11em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 6.75vw, 70px);
}
.triangle-container {
    position: relative;
    display: inline-block;
}
.triangle-container:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.option-container:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.option-container-2:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.title-container:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.gallery-container {
    display: flex;
    width: 100%;
    gap: 0px;
    margin-top: 25px;
    position: relative;
    justify-content: flex-start;
}
.column {
    min-height: 100vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left-column {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.right-column {
    flex: 1;
    justify-content: flex-start;
}
.option-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
    text-align: center;
    width: 100%;
    margin-top: clamp(10px, 3vw, 40px);
}
.option-container-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: clamp(45px, 5vw, 70px);
    position: relative;
    width: 100%;
}
.header-text {
    color: #FFFFFF;
    letter-spacing: -0.11em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(31.5px, 6vw, 72px);
    position: relative;
    flex: 1;
}
.contact-text {
    color: #FFFFFF;
    letter-spacing: -0.07em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 3vw, 45px);
    position: relative;
    flex: 2;
}
.dropcap {
    float: left;
    font-size: clamp(60px, 8vw, 120px);
    line-height: 0.8;
    margin: 0 5px 0 0;
    font-weight: 700;
    color: #FFFFFF
}
.title-text {
    color: #FFFFFF;
    letter-spacing: -0.11em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(31.5px, 6.75vw, 72px);
    line-height: 0.8;
}
.rectangle {
    width: 90%;
    height: 100%;
    border-radius: 75px;
    position: relative;;
    bottom: 0;
    top: clamp(0px, 3.5vw, 5px);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

.contact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
    gap: 20px;
    flex-direction: column;
}

.book-button {
    background-color: #FFFFFF;
    color: #690093;
    width: clamp(100px, 15vw, 300px);
    height: clamp(100px, 15vw, 300px);
    border-radius: 50%;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(17px, 2vw, 40px);
    letter-spacing: -0.11em;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
}

.book-button:hover {
    transform: scale(1.05);
    background-color: #8a1bb8;
}

.social-link {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.social-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}
.sukumawiki-text {
  text-align: center;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  width: 100vw; 
  letter-spacing: -0.11em;
  margin-top: -1vh;
}
.suku-line-1 {
  font-size: clamp(31.5px, 6.75vw, 72px);
  font-weight: 700;
  letter-spacing: -0.11em;
  line-height: 0.95;
  white-space: nowrap;
}
.suku-italic {
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34.66px, 5.775vw, 79.2px);
  transform: translateY(3vh);
}
.booking-flow {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

.step-card {
    width: min(820px, 92%);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 42px;
    padding: clamp(20px, 3vw, 36px);
    color: #FFFFFF;
    text-align: left;
    backdrop-filter: blur(6px);
}

.step-progress {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.step-progress-bar {
    height: 100%;
    width: 0%;
    background: #FFFFFF;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.step-label {
    font-size: clamp(14px, 1.1vw, 18px);
    letter-spacing: -0.05em;
    opacity: 0.8;
    margin-bottom: 8px;
}

.step-title {
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 700;
    letter-spacing: -0.08em;
    line-height: 0.95;
    margin-bottom: 18px;
    color: #FFFFFF;
}

.step-subtext {
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.45;
    color: rgba(255,255,255,0.7);
    margin-top: -15px;
    margin-bottom: 20px;
    font-style: italic;
}

.step-input,
.step-select,
.step-time-button,
.step-option,
.step-nav-button {
    font-family: 'Inter', sans-serif;
}

.step-input,
.step-select {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 22px;
    padding: 16px 18px;
    font-size: 1rem;
    background: #FFFFFF;
    color: #690093;
    margin-bottom: 18px;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.option-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step-option {
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    border-radius: 24px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: visible;
}

.step-option:hover {
    transform: scale(1.02);
}

.step-option.selected {
    background: #FFFFFF;
    color: #690093;
    border-color: #FFFFFF;
}

.option-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 8px;
    line-height: 1.08;
    text-wrap: balance;
}

.option-desc {
    display: block;
    width: 100%;
    padding: 0 0.2em;
    font-size: 0.95rem;
    line-height: 1.4;
    font-style: italic;
    font-weight: 300;
    opacity: 0.7;
    margin-top: -0.4rem;
    overflow: visible;
}

.pricing-group {
    margin-bottom: 22px;
}

.pricing-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 10px;
}

.pricing-line {
    font-size: 0.96rem;
    line-height: 1.45;
    opacity: 0.95;
    margin-bottom: 8px;
}

.calendar-shell {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: start;
}

.calendar-box,
.time-box {
    background: rgba(255,255,255,0.08);
    border-radius: 26px;
    padding: 18px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.calendar-month {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.calendar-nav {
    border: none;
    background: #FFFFFF;
    color: #690093;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

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

.calendar-weekday {
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.7;
    padding-bottom: 3px;
}

.calendar-day {
    border: none;
    border-radius: 16px;
    min-height: 44px;
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    font-size: 0.86rem;
}

.calendar-day:hover:not(.empty):not(.disabled) {
    transform: scale(1.03);
}

.calendar-day.selected {
    background: #FFFFFF;
    color: #690093;
    font-weight: 700;
}

.calendar-day.disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.time-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.step-time-button {
    border: none;
    border-radius: 18px;
    padding: 12px;
    background: rgba(255,255,255,0.12);
    color: #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    font-size: 0.85rem;
}

.step-time-button.selected {
    background: #FFFFFF;
    color: #690093;
    font-weight: 700;
}

.summary-box {
    background: rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 18px;
}

.summary-line {
    margin-bottom: 6px;
    line-height: 1.05;
    font-size: 1.1rem;
}

.step-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.step-nav-button {
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.step-nav-button:hover {
    transform: scale(1.02);
}

.step-nav-button.secondary {
    background: rgba(255,255,255,0.12);
    color: #FFFFFF;
}

.step-nav-button.primary {
    background: #FFFFFF;
    color: #690093;
}

.confirmation-message {
    text-align: left;
    line-height: 1.6;
    font-size: 1rem;
    color: rgba(255,255,255,0.95);
}

@media (max-width: 900px) {
    .calendar-shell {
        grid-template-columns: 1fr;
    }

    .option-grid,
    .option-grid.three {
        grid-template-columns: 1fr;
    }

    .time-grid {
        grid-template-columns: 1fr;
    }

    .step-actions {
        flex-direction: column;
    }
}

#pricingOptions .step-option[data-id="only regular rate"] {
    cursor: default;
}

#pricingOptions .step-option[data-id="only regular rate"]:hover {
    transform: none;
}
.past-day {
    background: transparent !important;
    color: rgba(255,255,255,0.2);
    border: none;
    cursor: default;
}
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.modal-box {
  width: min(92vw, 520px);
  height: min(87.81vw, 496.51px);
  padding: 24px 22px;
  border-radius: 16px;
  background: #000; /* matches your design */
  color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-title {
  font-size: clamp(20px, 3.2vw, 28px);
  letter-spacing: -0.11em;
  margin-bottom: 6px;
  font-weight: 800;
}
.modal-sub {
  opacity: .8;
  margin-bottom: 14px;
}
.modal-label {
  display: block;
  font-weight: 800;
  letter-spacing: -0.11em;
  margin: 10px 0 6px;
  font-size: clamp(20px, 3.2vw, 28px);
}
.modal-input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 75px;
  background: rgba(245,245,245,.20);
  color: #fff;
  outline: none;
  margin-top: 15px;
  font-size: clamp(16px, 2.4vw, 20px);
  padding-inline: 12px;
}
.modal-or {
  text-align: center; opacity: .65; margin: 8px 0;
}
.modal-error {
  margin-top: 8px; color: #ff6b6b; font-weight: 700;
}
.modal-actions {
  margin-top: 16px; display: flex; gap: 10px; justify-content: center;
}
.progress-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-height: 190px;
  padding: 80px 90px;
}
.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.progress-img {
  width: clamp(114.75px, 28vw,  204px);
  height: auto;
  user-select: none;
  pointer-events: none;
}

.progress-text {
  font-weight: 800;
  letter-spacing: -0.11em;
  font-size: clamp(20px, 3.2vw, 28px);
  color: #fff;
  width: auto;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}