:root {
     --primary-gradient: linear-gradient(to bottom left, #0f172a, #1e1a78, #0f172a);
     ;
     --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
     --danger-gradient: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 100%);
     --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     --whatsapp-gradient: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 }

 /* Floating Action Button with Ripple Effect */
 .contact-fab {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 100000;
 }

 .fab-button {
     width: 65px;
     height: 65px;
     border-radius: 50%;
     background: var(--primary-gradient);
     border: none;
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     position: relative;
     overflow: hidden;
 }

 .fab-button::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transform: scale(0);
     transition: transform 0.5s ease;
 }

 .fab-button:hover::before {
     transform: scale(1.5);
     opacity: 0;
 }

 .fab-button:hover {
     transform: scale(1.15);
     box-shadow: 0 6px 25px rgba(102, 126, 234, 0.7);
 }

 .fab-button.active {
     transform: rotate(180deg) scale(1.1);
 }

 .fab-button i {
     font-size: 26px;
     color: white;
     transition: transform 0.3s ease;
     z-index: 1;
 }

 .fab-button.active i {
     transform: rotate(45deg);
 }

 /* Notification Badge */
 .notification-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background: #ff4757;
     color: white;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: bold;
     animation: pulse 2s infinite;
     border: 2px solid white;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 /* Action Bar with Enhanced Animations */
 .action-bar {
     position: fixed;
     bottom: 110px;
     right: 30px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(30px) scale(0.8);
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     z-index: 999;
 }

 .action-bar.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
 }

 .action-item {
     display: flex;
     align-items: center;
     gap: 12px;
     background: white;
     border-radius: 50px;
     padding: 10px 20px 10px 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     animation: slideInRight 0.5s ease forwards;
     opacity: 0;
     transform: translateX(50px);
     position: relative;
     overflow: hidden;
 }

 .action-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
     transition: left 0.5s ease;
 }

 .action-item:hover::before {
     left: 100%;
 }

 .action-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .action-item:nth-child(2) {
     animation-delay: 0.15s;
 }

 .action-item:nth-child(3) {
     animation-delay: 0.2s;
 }

 .action-item:nth-child(4) {
     animation-delay: 0.25s;
 }

 .action-item:nth-child(5) {
     animation-delay: 0.3s;
 }

 @keyframes slideInRight {
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .action-item:hover {
     transform: translateX(-8px) scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
 }

 .action-item:active {
     transform: translateX(-8px) scale(0.98);
 }

 .action-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: white;
     flex-shrink: 0;
     transition: transform 0.3s ease;
 }

 .action-item:hover .action-icon {
     transform: rotate(360deg);
 }

 .phone-icon {
     background: var(--success-gradient);
 }

 .email-icon {
     background: var(--danger-gradient);
 }

 .form-icon {
     background: var(--info-gradient);
 }

 .whatsapp-icon {
     background: var(--whatsapp-gradient);
 }

 .social-icon {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 }

 .action-content {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .action-text {
     font-weight: 600;
     color: #333;
     white-space: nowrap;
     font-size: 15px;
     line-height: 1;
 }

 .action-subtext {
     font-size: 11px;
     color: #888;
     white-space: nowrap;
 }

 /* Enhanced Modal */
 .modal-content {
     border-radius: 25px;
     border: none;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
 }

 .modal-header {
     background: var(--primary-gradient);
     color: white;
     border: none;
     padding: 30px;
 }

 .modal-header h5 {
     font-weight: 600;
     font-size: 24px;
 }

 .modal-header .btn-close {
     filter: brightness(0) invert(1);
     opacity: 1;
 }

 .modal-body {
     padding: 35px;
     background: #f8f9fa;
 }

 .form-floating {
     margin-bottom: 20px;
 }

 .form-control,
 .form-select {
     border-radius: 12px;
     border: 2px solid #e0e0e0;
     padding: 15px 18px;
     transition: all 0.3s ease;
     background: white;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #667eea;
     box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.15);
     transform: translateY(-2px);
 }

 .form-label {
     font-weight: 600;
     color: #555;
     margin-bottom: 8px;
 }

 .btn-submit {
     background: var(--primary-gradient);
     border: none;
     border-radius: 12px;
     padding: 15px 35px;
     color: white;
     font-weight: 600;
     font-size: 16px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .btn-submit::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
 }

 .btn-submit:hover::before {
     width: 300px;
     height: 300px;
 }

 .btn-submit:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
 }

 .btn-submit:active {
     transform: translateY(-1px);
 }

 .btn-submit span {
     position: relative;
     z-index: 1;
 }

 /* Info Cards */
 .info-card {
     background: white;
     border-radius: 25px;
     padding: 35px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     margin-bottom: 30px;
     animation: fadeInUp 0.6s ease;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .info-card h2 {
     color: #333;
     margin-bottom: 20px;
     font-weight: 700;
 }

 .info-card p {
     color: #666;
     line-height: 1.8;
 }

 .feature-list {
     list-style: none;
     padding: 0;
 }

 .feature-list li {
     padding: 12px 0;
     border-bottom: 1px solid #f0f0f0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .feature-list li:last-child {
     border-bottom: none;
 }

 .feature-list li i {
     color: #667eea;
     font-size: 20px;
 }

 /* Toast Enhanced */
 .toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1100;
 }

 .toast {
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     border: none;
     min-width: 300px;
 }

 .toast-header {
     border-radius: 15px 15px 0 0;
     padding: 15px 20px;
 }

 .toast-body {
     padding: 15px 20px;
 }

 /* Social Links Modal */
 .social-links {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin-top: 20px;
 }

 .social-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px;
     border-radius: 15px;
     background: white;
     border: 2px solid #e0e0e0;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     color: #333;
 }

 .social-link:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-color: #667eea;
 }

 .social-link i {
     font-size: 24px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     color: white;
 }

 .social-link .bi-facebook {
     background: #1877f2;
 }

 .social-link .bi-twitter-x {
     background: #000000;
 }

 .social-link .bi-instagram {
     background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 }

 .social-link .bi-linkedin {
     background: #0077b5;
 }

 .social-link-text {
     font-weight: 600;
 }

 /* Backdrop Blur */
 .backdrop-blur {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .action-item {
         padding: 8px 15px 8px 8px;
     }

     .action-text {
         font-size: 14px;
     }

     .action-subtext {
         font-size: 10px;
     }

     .action-icon {
         width: 42px;
         height: 42px;
         font-size: 18px;
     }

     .contact-fab {
         bottom: 20px;
         right: 20px;
     }

     .fab-button {
         width: 60px;
         height: 60px;
     }

     .action-bar {
         bottom: 90px;
         right: 20px;
     }

     .social-links {
         grid-template-columns: 1fr;
     }
 }

 /* Loading Animation */
 .btn-submit.loading {
     pointer-events: none;
 }

 .btn-submit.loading span {
     opacity: 0;
 }

 .btn-submit.loading::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     top: 50%;
     left: 50%;
     margin-left: -10px;
     margin-top: -10px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-top-color: white;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Modal dialog improvements */
 #socialModal .modal-dialog {
     max-width: 450px;
     margin: auto;
     transition: transform 0.25s ease-out;
 }

 /* Add slight zoom effect when modal opens */
 #socialModal.show .modal-dialog {
     transform: scale(1.03);
 }

 /* Modal content styling */
 #socialModal .modal-content {
     border-radius: 12px;
     border: none;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 /* Modal header styling */
 #socialModal .modal-header {
     border-bottom: 1px solid #e9ecef;
     background-color: #f8f9fa;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }

 /* Modal title */
 #socialModal .modal-title {
     font-size: 1.2rem;
     font-weight: 600;
     display: flex;
     align-items: center;
 }

 /* Close button spacing */
 #socialModal .btn-close {
     background-size: 55%;
 }

 /* Modal body padding */
 #socialModal .modal-body {
     padding: 20px 24px;
 }

 /* Responsive design */
 @media (max-width: 575px) {
     #socialModal .modal-dialog {
         max-width: 95%;
     }
 }

 details:not([open]) .faq-answer {
     /* Using visibility instead of display keeps content in DOM for SEO */
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: all 0.3s ease-out;
 }

 details[open] .faq-answer {
     max-height: 1000px;
     opacity: 1;
     transition: all 0.5s ease-in;
 }

 :root {
     --navy: #1a1f2e;
     --navy-deep: #111520;
     --navy-mid: #232a3d;
     --accent: #c8855a;
     --accent-deep: #a86d42;
     --accent-light: #e8a87a;
     --accent-pale: rgba(200, 133, 90, .12);
     --accent-glow: rgba(200, 133, 90, .38);
     --white: #fff;
     --text-muted: #8a93a8;
     --text-light: #c4cad8;
     --ease-out: cubic-bezier(.34, 1.56, .64, 1);
     --ease-smooth: cubic-bezier(.4, 0, .2, 1);
     --font: 'Poppins', sans-serif;
     --font-head: 'Poppins', sans-serif;
 }

 /* ════════════════════════════════════════════════
   WIDGET CONTAINER
   ════════════════════════════════════════════════ */
 .widget {
     position: fixed;
     bottom: 32px;
     right: 32px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }

 /* ────── COLLAPSED STATE: animated icon orb ────── */
 .widget__orb {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(145deg, var(--accent-light), var(--accent-deep));
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-smooth);
     box-shadow:
         0 6px 28px var(--accent-glow),
         0 2px 8px rgba(0, 0, 0, .15);
     /* entrance */
     animation: orbIn .55s var(--ease-out) .25s both;
 }

 @keyframes orbIn {
     from {
         transform: scale(0) rotate(-12deg);
         opacity: 0
     }

     to {
         transform: scale(1) rotate(0);
         opacity: 1
     }
 }

 .widget__orb:hover {
     transform: scale(1.1);
     box-shadow: 0 10px 38px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, .18);
 }

 .widget__orb:active {
     transform: scale(.95)
 }

 /* orb pulse rings */
 .widget__orb::before,
 .widget__orb::after {
     content: '';
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     border: 2px solid var(--accent-light);
     opacity: 0;
     animation: orbPulse 2.4s ease-out infinite;
     pointer-events: none;
 }

 .widget__orb::after {
     animation-delay: .8s
 }

 @keyframes orbPulse {
     0% {
         transform: scale(.88);
         opacity: .5
     }

     100% {
         transform: scale(1.35);
         opacity: 0
     }
 }

 /* calendar icon inside orb */
 .widget__orb svg {
     width: 28px;
     height: 28px;
     transition: transform .3s var(--ease-out);
     position: relative;
     z-index: 1;
 }

 .widget__orb:hover svg {
     transform: scale(1.15) rotate(-6deg)
 }

 /* close icon (shown when expanded) */
 .widget__orb--close svg {
     transform: none !important;
 }

 .widget__orb--close:hover svg {
     transform: rotate(90deg) !important;
 }

 /* ────── EXPANDED CARD ────── */
 .widget__card {
     position: absolute;
     bottom: calc(100% + 14px);
     right: 0;
     width: 300px;
     background: var(--navy);
     border-radius: 18px;
     box-shadow:
         0 12px 48px rgba(26, 31, 46, .35),
         0 2px 12px rgba(0, 0, 0, .2),
         inset 0 1px 0 rgba(255, 255, 255, .06);
     overflow: hidden;
     /* morph in */
     transform-origin: bottom right;
     transform: scale(.6) translateY(20px);
     opacity: 0;
     pointer-events: none;
     transition:
         transform .4s var(--ease-out),
         opacity .28s var(--ease-smooth);
 }

 .widget--open .widget__card {
     transform: scale(1) translateY(0);
     opacity: 1;
     pointer-events: auto;
 }

 /* card top gradient stripe */
 .widget__card-stripe {
     height: 4px;
     background: linear-gradient(90deg, var(--accent-deep), var(--accent-light), var(--accent-deep));
     background-size: 200% 100%;
     animation: stripeShimmer 3s linear infinite;
 }

 @keyframes stripeShimmer {
     0% {
         background-position: 0% 50%
     }

     100% {
         background-position: 200% 50%
     }
 }

 /* card header */
 .widget__card-head {
     padding: 20px 22px 16px;
     text-align: center;
     position: relative;
 }

 .widget__card-head::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 22px;
     right: 22px;
     height: 1px;
     background: rgba(255, 255, 255, .07);
 }

 .widget__card-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: var(--accent-pale);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
 }

 .widget__card-icon svg {
     width: 18px;
     height: 18px;
     color: var(--accent-light)
 }

 .widget__card-head h4 {
     font-family: var(--font-head);
     font-size: 18px;
     font-weight: 600;
     color: var(--white);
     margin-bottom: 3px;
 }

 .widget__card-head p {
     font-size: 11.5px;
     color: var(--text-muted);
 }

 /* card body */
 .widget__card-body {
     padding: 18px 22px 20px
 }

 /* treatment select */
 .widget__select-wrap {
     position: relative;
     margin-bottom: 14px;
 }

 .widget__select-label {
     display: block;
     font-size: 10.5px;
     font-weight: 600;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 7px;
 }

 .widget__select {
     width: 100%;
     appearance: none;
     -webkit-appearance: none;
     background: var(--navy-mid);
     color: var(--white);
     font-family: var(--font);
     font-size: 13px;
     font-weight: 500;
     padding: 11px 36px 11px 14px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, .08);
     cursor: pointer;
     outline: none;
     transition: border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
 }

 .widget__select:focus {
     border-color: rgba(200, 133, 90, .45);
     box-shadow: 0 0 0 3px rgba(200, 133, 90, .12);
 }

 /* custom arrow */
 .widget__select-wrap::after {
     content: '';
     position: absolute;
     right: 13px;
     top: 50%;
     transform: translateY(calc(-50% + 4px));
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid var(--accent-light);
     pointer-events: none;
 }

 /* primary CTA button */
 .widget__btn-main {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
     color: var(--white);
     font-family: var(--font);
     font-size: 14px;
     font-weight: 600;
     padding: 13px 20px;
     border-radius: 12px;
     border: none;
     cursor: pointer;
     text-decoration: none;
     position: relative;
     overflow: hidden;
     transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-smooth);
     box-shadow: 0 4px 18px var(--accent-glow);
 }

 /* inner shimmer */
 .widget__btn-main::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 60%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
     transition: left .5s ease;
     z-index: 0;
 }

 .widget__btn-main:hover::before {
     left: 150%
 }

 .widget__btn-main:hover {
     transform: translateY(-2px);
     box-shadow: 0 7px 28px var(--accent-glow);
 }

 .widget__btn-main:active {
     transform: translateY(0)
 }

 .widget__btn-main svg,
 .widget__btn-main span {
     position: relative;
     z-index: 1
 }

 .widget__btn-main svg {
     width: 15px;
     height: 15px
 }

 /* divider */
 .widget__divider {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 14px 0;
 }

 .widget__divider::before,
 .widget__divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: rgba(255, 255, 255, .07);
 }

 .widget__divider span {
     font-size: 10.5px;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 1px
 }

 /* phone row */
 .widget__phone {
     display: flex;
     align-items: center;
     gap: 11px;
     text-decoration: none;
     padding: 11px 14px;
     border-radius: 10px;
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .06);
     transition: background .25s var(--ease-smooth), border-color .25s var(--ease-smooth), transform .2s var(--ease-smooth);
 }

 .widget__phone:hover {
     background: rgba(255, 255, 255, .08);
     border-color: rgba(200, 133, 90, .25);
     transform: translateY(-1px);
 }

 .widget__phone-icon {
     width: 34px;
     height: 34px;
     border-radius: 9px;
     background: rgba(200, 133, 90, .12);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .widget__phone-icon svg {
     width: 15px;
     height: 15px;
     color: var(--accent-light)
 }

 .widget__phone-text {
     display: flex;
     flex-direction: column;
     gap: 1px
 }

 .widget__phone-text span {
     font-size: 10px;
     color: var(--text-muted);
     font-weight: 500;
     letter-spacing: .5px
 }

 .widget__phone-text strong {
     font-size: 18px;
     color: var(--white);
     font-weight: 600;
     letter-spacing: -.2px
 }

 /* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
 @media(max-width:480px) {
     .widget {
         bottom: 24px;
         right: 20px
     }

     .widget__card {
         width: 80vw
     }
 }