/* ============================================================
   APPOINTMENT PAGE STYLES — Pixel-Perfect Matching Live Design
   ============================================================ */

/* 1. Top Feature Cards (icon-bx-wraper style-3) */
.icon-bx-wraper.style-3 {
    border-radius: 20px;
    padding: 30px 120px 25px 30px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(67, 26, 87, 0.08);
    transition: all 0.35s ease;
    min-height: 200px;
    height: 100%;
}

.icon-bx-wraper.style-3:after {
    background: #ffffff;
    transition: all 0.35s ease;
}

/* Hover & Active: Whole Card Background turns Brand Deep Purple */
.icon-bx-wraper.style-3.active,
.icon-bx-wraper.style-3:hover {
    background: #431A57 !important;
    background-color: #431A57 !important;
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(67, 26, 87, 0.35) !important;
    border-color: #431A57 !important;
}

.icon-bx-wraper.style-3.active:after,
.icon-bx-wraper.style-3:hover:after,
.icon-bx-wraper.style-3.primary-hover.active:after,
.icon-bx-wraper.style-3.primary-hover:hover:after {
    background: #431A57 !important;
    background-color: #431A57 !important;
}

.icon-bx-wraper.style-3.active .bg,
.icon-bx-wraper.style-3:hover .bg,
.icon-bx-wraper.style-3.primary-hover.active .bg,
.icon-bx-wraper.style-3.primary-hover:hover .bg {
    background: #431A57 !important;
    background-color: #431A57 !important;
    opacity: 1 !important;
}

.icon-bx-wraper.style-3 .dz-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px;
    font-weight: 700;
    color: #2D0F1E;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.icon-bx-wraper.style-3 p {
    font-size: 14.5px;
    color: #5A4550;
    line-height: 1.7;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.icon-bx-wraper.style-3 .icon-link-hover-end {
    color: #AD4F70;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.icon-bx-wraper.style-3 .icon-bx {
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    width: 65px;
    height: 65px;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
}

.icon-bx-wraper.style-3 .icon-bx i,
.icon-bx-wraper.style-3 .icon-cell i {
    color: #AD4F70;
    font-size: 28px;
    transition: all 0.35s ease;
}

/* Text Colors on Purple: White and Gold (Opposite of Purple) */
.icon-bx-wraper.style-3.active .dz-title,
.icon-bx-wraper.style-3:hover .dz-title {
    color: #FFFFFF !important;
}

.icon-bx-wraper.style-3.active .dz-title:after,
.icon-bx-wraper.style-3:hover .dz-title:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%) !important;
}

.icon-bx-wraper.style-3.active p,
.icon-bx-wraper.style-3:hover p {
    color: #F3E8EE !important;
}

.icon-bx-wraper.style-3.active .icon-link-hover-end,
.icon-bx-wraper.style-3:hover .icon-link-hover-end {
    color: #F2B423 !important;
    font-weight: 700 !important;
    gap: 12px;
}

.icon-bx-wraper.style-3.active .icon-link-hover-end i,
.icon-bx-wraper.style-3:hover .icon-link-hover-end i {
    color: #F2B423 !important;
}

.icon-bx-wraper.style-3.active::before,
.icon-bx-wraper.style-3:hover::before {
    color: #FFFFFF !important;
    opacity: 0.18 !important;
}

/* Button Remains As It Is: Golden gradient bottom-right badge with white icon */
.icon-bx-wraper.style-3.active .icon-bx,
.icon-bx-wraper.style-3:hover .icon-bx {
    background: linear-gradient(135deg, #D4A537 0%, #FA9B2D 100%) !important;
    box-shadow: 0 6px 20px rgba(212, 165, 55, 0.45) !important;
    transform: scale(1.05);
}

.icon-bx-wraper.style-3.active .icon-bx i,
.icon-bx-wraper.style-3:hover .icon-bx i,
.icon-bx-wraper.style-3.active .icon-cell i,
.icon-bx-wraper.style-3:hover .icon-cell i {
    color: #ffffff !important;
}

/* 2. Appointment Booking Section — Mother & Baby Background Image */
.content-wrapper.style-4 {
    position: relative;
    padding: 80px 0;
    background-color: #FFFDFE !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    background-size: auto 90% !important;
}

.content-wrapper.style-4.background-blend-mode {
    background-blend-mode: normal !important;
}

@media (max-width: 1400px) {
    .content-wrapper.style-4 {
        background-size: auto 80% !important;
    }
}

@media (max-width: 1200px) {
    .content-wrapper.style-4 {
        background-size: auto 70% !important;
    }
}

@media (max-width: 991px) {
    .content-wrapper.style-4 {
        background-image: none !important;
    }
}

/* 3. Floating Outline Rounded Form Fields (Pill Shaped Inputs) */
.floating-outline-rounded {
    position: relative;
    border-radius: 50px;
}

.floating-outline-rounded .form-control,
.floating-outline-rounded .form-select {
    border-radius: 50px !important;
    border: 1.5px solid rgba(173, 79, 112, 0.45) !important;
    background: transparent !important;
    padding: 14px 45px 14px 22px !important;
    height: 52px !important;
    font-size: 13.5px !important;
    color: #431A57 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.floating-outline-rounded .form-control:focus,
.floating-outline-rounded .form-select:focus {
    border-color: #431A57 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(67, 26, 87, 0.08) !important;
}

.floating-outline-rounded label {
    padding: 15px 22px !important;
    font-size: 13px !important;
    color: #5A4550 !important;
    font-weight: 500 !important;
    pointer-events: none;
    transition: all 0.25s ease !important;
}

.floating-outline-rounded .form-control:focus ~ label,
.floating-outline-rounded .form-control:not(:placeholder-shown) ~ label,
.floating-outline-rounded .form-select ~ label {
    top: -10px !important;
    left: 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #431A57 !important;
    background: #FFFDFE !important;
    padding: 0 8px !important;
    height: auto !important;
    transform: none !important;
    border-radius: 4px;
}

.floating-outline-rounded .input-group-text {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #AD4F70 !important;
    font-size: 16px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: color 0.3s ease !important;
}

.floating-outline-rounded .form-control:focus ~ .input-group-text,
.floating-outline-rounded .form-select:focus ~ .input-group-text {
    color: #431A57 !important;
}

/* 4. Book Appointment Submit Button (Gradient Pill) */
.appointment-page-form button[type="submit"] {
    background: linear-gradient(135deg, #AD5D4F 0%, #431A57 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(67, 26, 87, 0.3) !important;
    transition: all 0.35s ease !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.appointment-page-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(67, 26, 87, 0.45) !important;
    background: linear-gradient(135deg, #431A57 0%, #AD5D4F 100%) !important;
}

.appointment-page-form button[type="submit"] i {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.appointment-page-form button[type="submit"]:hover i {
    transform: translateX(4px);
}