:root {
  --primary: #5b9a8b;
  --primary-hover: #67ad9c;
  --primary-light: #e8f5f2;
  --primary-dark: #4a8577;
}

.no-border {border:none!important}
.font-warning {color: #ff9407}
.text-bold {font-weight: bold !important;}
.text-size-small {font-size: small}
.text-size-large {font-size: large}
.help-block {color:#e74c3c; font-size:.85rem; margin-top:5px}
.btn:hover {border-color: unset !important}
.btn-primary {position:relative; background:linear-gradient(135deg,var(--primary),var(--primary-hover)); border:none; color:#fff; padding:10px 20px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; text-decoration:none; overflow:hidden; transition:background .4s ease}
.btn-primary::after {content:""; position:absolute; top:0; left:-150%; width:250%; height:100%; background:linear-gradient(120deg,transparent,#ffffff59,transparent); transition:left .8s ease}
.btn-primary:hover {background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.btn-primary:hover::after {left:150%}
.btn-outline-primary {border:2px solid var(--primary); color:var(--primary); background:transparent; padding:8px 16px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease; text-decoration:none}
.btn-outline-primary:hover {background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(91,154,139,0.2)}
.btn-outline-secondary {border:2px solid #95a5a6; color:#7f8c8d; background:transparent; padding:8px 16px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease; text-decoration:none}
.btn-outline-secondary:hover {background:linear-gradient(135deg,#95a5a6,#7f8c8d); color:#fff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(127,140,141,0.3)}
.btn-success {background:linear-gradient(135deg,#27ae60,#2ecc71); border:none; color:#fff; padding:10px 20px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease}
.btn-success:hover {background:linear-gradient(135deg,#229954,#27ae60); transform:translateY(-2px); box-shadow:0 4px 12px rgba(39,174,96,0.3)}
.btn-warning {background:linear-gradient(135deg,#f39c12,#f1c40f); border:none; color:#fff; padding:10px 20px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease}
.btn-warning:hover {background:linear-gradient(135deg,#e67e22,#f39c12); transform:translateY(-2px); box-shadow:0 4px 12px rgba(243,156,18,0.3)}
.btn-outline-warning {color:#f39c12;border-color:#f39c12}
.btn-outline-warning:hover {background:linear-gradient(135deg,#f39c12, #f1c40f);color:#fff;}
.btn-info {background:linear-gradient(135deg,#3498db,#5dade2); border:none; color:#fff; padding:10px 20px; border-radius:25px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .3s ease}
.btn-info:hover {background:linear-gradient(135deg,#2980b9,#3498db); transform:translateY(-2px); box-shadow:0 4px 12px rgba(52,152,219,0.3)}
.btn-outline-danger {border:2px solid #e74c3c; color:#e74c3c; background:transparent; padding:6px 12px; border-radius:20px; font-weight:500; display:inline-flex; align-items:center; gap:4px; transition:all .3s ease; text-decoration:none; font-size:.85rem}
.btn-outline-danger:hover {background:#e74c3c; color:#fff; transform:translateY(-2px); box-shadow:0 4px 8px #e74c3c33}
.btn-sm {padding:6px 12px; font-size:.85rem; border-radius:20px}
.start-95 {left: 95% !important;}
.rainbow-border::before {content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), #cec612, #df4e95, #3498db); animation: hue-cycle 10s linear infinite;}
@keyframes hue-cycle {
  0% {filter: hue-rotate(0deg);}
  100% {filter: hue-rotate(360deg);}
}
.user-layout {display:flex; min-height:100vh; background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}
.user-sidebar {width:280px; background:#fff; box-shadow:4px 0 15px rgba(0,0,0,0.03); position:fixed; left:0; top:0; height:100vh; overflow-y:auto; z-index:1000; transition:transform .3s ease; border-right:1px solid #f1f3f5}
.user-sidebar-header {padding:45px 25px 25px; text-align:center; position:relative}
.user-sidebar-header::after {content:''; position:absolute; bottom:0; left:30px; right:30px; height:1px; background:linear-gradient(90deg,transparent,rgba(91,154,139,0.15),transparent)}
.user-sidebar-title {font-size:11px; font-weight:700; color:var(--primary); margin-top:12px; letter-spacing:2px; text-transform:uppercase; text-shadow:none; opacity:0.6}
.user-sidebar-nav {padding:20px 0}
.nav-section {margin-bottom:30px}
.nav-section-title {padding:0 25px 15px; font-size:12px; font-weight:600; color:#95a5a6; text-transform:uppercase; letter-spacing:.5px}
.nav-item {display:block; padding:12px 25px; color:#2c3e50; text-decoration:none; transition:all .3s ease; border-left:3px solid transparent; margin:2px 0; position:relative}
.nav-item::before {content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--primary),transparent); transition:width 0.3s ease; z-index:-1}
.nav-item:hover {background-color:#f8f9fa; color:var(--primary); border-left-color:var(--primary)}
.nav-item:hover::before {width:100%}
.nav-item.active {background:linear-gradient(90deg,var(--primary-light),transparent); color:var(--primary); border-left-color:var(--primary); font-weight:600; box-shadow:inset 0 0 10px rgba(91,154,139,0.1)}
.nav-item i {width:20px; margin-right:12px; text-align:center}
.nav-item .nav-badge {float:right; background:#e74c3c; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center}
.nav-item .nav-admin-icon {float:right; color:var(--primary); font-size:15px; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center}
.user-main-content {flex:1; margin-left:280px; min-height:100vh; transition:margin-left .3s ease}
.user-top-bar {background:linear-gradient(135deg,#ffffff 0%,#f8fafb 100%); padding:15px 30px; box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:999; border-bottom:1px solid rgba(91,154,139,0.1)}
.user-top-bar-left {display:flex; align-items:center; gap:20px}
.sidebar-toggle {background:none; border:none; font-size:20px; color:#2c3e50; cursor:pointer; padding:8px; border-radius:5px; transition:background-color .3s ease; display:none}
.sidebar-toggle:hover {background-color:#f8f9fa}
.breadcrumb-nav {display:flex; align-items:center; gap:10px; color:#7f8c8d; font-size:14px}
.breadcrumb-nav a {color:var(--primary); text-decoration:none}
.breadcrumb-nav a:hover {text-decoration:underline}
.user-top-bar-right {display:flex; align-items:center; gap:15px}
.user-notifications {position:relative; cursor:pointer; padding:8px; border-radius:5px; transition:background-color .3s ease}
.user-notifications:hover {background-color:#f8f9fa}
.notification-badge {position:absolute; top:5px; right:5px; background:#e74c3c; color:#fff; font-size:10px; padding:2px 5px; border-radius:10px; min-width:16px; text-align:center}
.user-profile-mini {display:flex; align-items:center; gap:10px; padding:5px 15px; border-radius:20px; background-color:#f8f9fa; cursor:pointer; transition:background-color .3s ease}
.user-avatar {width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:14px}
.user-content {padding:30px 20px 20px}
.sidebar-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:#00000080; z-index:999; opacity:0; visibility:hidden; transition:all .3s ease}
.sidebar-overlay.show {opacity:1; visibility:visible}
.service-types-grid {display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.dashboard-welcome {text-align:center; margin:10px 0 35px 0; padding:30px 20px; background:linear-gradient(135deg,rgba(91,154,139,0.05),rgba(103,173,156,0.05)); border-radius:15px; position:relative; overflow:hidden}
.dashboard-welcome::before {content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(91,154,139,0.1) 0%,transparent 70%); animation:float 15s ease-in-out infinite}
.welcome-title {color:#2c3e50; font-size:2.5rem; font-weight:700; margin-bottom:10px; position:relative; display:inline-block}
.welcome-title:after {content:''; position:absolute; width:60%; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover)); bottom:-8px; left:50%; transform:translateX(-50%); border-radius:2px; box-shadow:0 2px 8px rgba(91,154,139,0.3)}
.welcome-subtitle {color:#7f8c8d; font-size:1.2rem; margin-bottom:0; position:relative}
@keyframes float {
  0%, 100% {transform:translate(0,0) rotate(0deg)}
  33% {transform:translate(30px,-30px) rotate(120deg)}
  66% {transform:translate(-20px,20px) rotate(240deg)}
}
.dashboard-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:25px; margin-bottom:40px}
.dashboard-card {background:#fff; border-radius:15px; padding:30px; text-align:center; box-shadow:0 4px 6px #0000000d; display:flex; flex-direction:column; align-items:center; position:relative; overflow:hidden; transition:all 0.3s ease; border:2px solid transparent}
.dashboard-card::before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover)); transform:scaleX(0); transition:transform 0.3s ease}
.dashboard-card:hover {box-shadow:0 12px 24px rgba(0,0,0,0.1); transform:translateY(-5px)}
.dashboard-card:hover::before {transform:scaleX(1)}
.card-icon {font-size:2.5rem; margin-bottom:20px; width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#fff}
.dashboard-card:nth-child(1) .card-icon {background:linear-gradient(135deg,#5b9a8b,#67ad9c); box-shadow:0 8px 16px rgba(91,154,139,0.3)}
.dashboard-card:nth-child(2) .card-icon {background:linear-gradient(135deg,#f39c12,#f1c40f); box-shadow:0 8px 16px rgba(243,156,18,0.3)}
.dashboard-card:nth-child(3) .card-icon {background:linear-gradient(135deg,#3498db,#5dade2); box-shadow:0 8px 16px rgba(52,152,219,0.3)}
.dashboard-card:nth-child(4) .card-icon {background:linear-gradient(135deg,#e74c3c,#ec7063); box-shadow:0 8px 16px rgba(231,76,60,0.3)}
.dashboard-card:nth-child(1):hover {border-color:rgba(91,154,139,0.3); background:linear-gradient(135deg,rgba(91,154,139,0.02),#fff)}
.dashboard-card:nth-child(2):hover {border-color:rgba(243,156,18,0.3); background:linear-gradient(135deg,rgba(243,156,18,0.02),#fff)}
.dashboard-card:nth-child(3):hover {border-color:rgba(52,152,219,0.3); background:linear-gradient(135deg,rgba(52,152,219,0.02),#fff)}
.dashboard-card:nth-child(4):hover {border-color:rgba(231,76,60,0.3); background:linear-gradient(135deg,rgba(231,76,60,0.02),#fff)}
.dashboard-card:nth-child(1)::before {background:linear-gradient(90deg,#5b9a8b,#67ad9c)}
.dashboard-card:nth-child(2)::before {background:linear-gradient(90deg,#f39c12,#f1c40f)}
.dashboard-card:nth-child(3)::before {background:linear-gradient(90deg,#3498db,#5dade2)}
.dashboard-card:nth-child(4)::before {background:linear-gradient(90deg,#e74c3c,#ec7063)}
.dashboard-card h3 {color:#2c3e50; margin-bottom:15px; font-weight:600; font-size:1.3rem}
.dashboard-card p {color:#7f8c8d; margin-bottom:20px; line-height:1.6; min-height:52px}
.dashboard-card a {width:140px; display:flex; justify-content:center}
.bookings-stats {display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#ffffff 0%,#f8fafb 100%); border-radius:15px; padding:25px; margin-bottom:30px; box-shadow:0 4px 12px rgba(0,0,0,0.08); position:relative; overflow:hidden; border:1px solid rgba(91,154,139,0.1)}
.booking-stats {display:flex; gap:40px}
.stat-item {text-align:center; padding:10px 20px; border-radius:10px; transition:all 0.3s ease}
.stat-item:hover {background:rgba(255,255,255,0.8); transform:translateY(-3px)}
.stat-number {display:block; font-size:2rem; font-weight:700; color:#3498db}
.stat-number.pending {color:#f39c12; text-shadow:0 2px 4px rgba(243,156,18,0.2)}
.stat-number.upcoming {color:var(--primary); text-shadow:0 2px 4px rgba(91,154,139,0.2)}
.stat-number.completed {color:#27ae60; text-shadow:0 2px 4px rgba(39,174,96,0.2)}
.stat-number.cancelled {color:#e74c3c; text-shadow:0 2px 4px rgba(231,76,60,0.2)}
.stat-label {color:#7f8c8d; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; font-weight:500}
.bookings-content {background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 4px 6px #0000000d}
.bookings-tabs {position:relative}
.nav-tabs {display:flex; list-style:none; margin:0; padding:0; background:#f8f9fa; border-bottom:1px solid #dee2e6}
.nav-tab {flex:1; text-align:center; padding:15px 20px; cursor:pointer; transition:all .3s ease; font-weight:500; color:#6c757d; position:relative}
.nav-tab:hover {background:#e9ecef; color:#495057}
.nav-tab.active {background:#fff; color:var(--primary); border-bottom:3px solid var(--primary)}
.tab-content {padding:0}
.tab-pane {display:none}
.tab-pane.active {display:block}
.section-header {text-align:center; margin-bottom:30px}
.section-title {color:#2c3e50; font-size:2rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:12px}
.section-title i {color:#f39c12; font-size:1.8rem}
.section-subtitle {color:#7f8c8d; font-size:1.1rem; margin:0}
.booking-progress {display:flex; justify-content:center; align-items:center; margin-bottom:20px; padding:10px 0}
.booking-progress.compact .step-icon {width:36px; height:36px; font-size:1.1rem; margin-bottom:6px}
.booking-progress.compact .progress-connector {height:2px; top:20px}
.booking-progress.compact .step-label {font-size:.8rem}
.progress-step {display:flex; flex-direction:column; align-items:center; position:relative; flex:1; max-width:130px; z-index:1}
.step-icon {width:40px; height:40px; border-radius:50%; background:#e9ecef; border:2px solid #e9ecef; display:flex; justify-content:center; align-items:center; margin-bottom:8px; color:#6c757d; font-size:1.2rem; transition:all .3s ease}
.step-label {font-size:.9rem; font-weight:500; color:#6c757d; text-align:center; transition:all .3s ease}
.progress-connector {position:absolute; top:20px; left:50%; right:-50%; height:2px; background:#e9ecef; z-index:-1}
.progress-step:last-child .progress-connector {display:none}
.progress-step.completed .step-icon {background-color:#d4edda; border-color:#28a745; color:#28a745}
.progress-step.completed .step-label {color:#28a745}
.progress-step.completed .progress-connector {background:#28a745}
.progress-step.active .step-icon {background-color:var(--primary-light); border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 5px rgba(91,154,139,0.2); transform:scale(1.1); animation:pulse 2s infinite}
.progress-step.active .step-label {color:var(--primary); font-weight:600}
.progress-step.active .progress-connector {background:linear-gradient(to right,var(--primary) 50%,#e9ecef 50%)}

@keyframes pulse {
  0% {box-shadow:0 0 0 0 rgba(91,154,139,0.7)}
  70% {box-shadow:0 0 0 10px rgba(91,154,139,0)}
  100% {box-shadow:0 0 0 0 rgba(91,154,139,0)}
}

.booking-form-container {background:#fff; border-radius:15px; padding:24px; box-shadow:0 10px 30px #00000014; margin-bottom:24px; animation:slideUp .5s ease-out; position:relative; overflow:hidden}
.booking-form-container:before {content:''; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.form-section {margin-bottom:10px; padding:20px;background:#fff;}
.section-icon {width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-hover)); display:flex; justify-content:center; align-items:center; margin-right:10px; color:#fff; font-size:1.2rem; box-shadow:0 4px 10px rgba(91,154,139,0.2)}
.form-content {padding-left:55px}
.form-actions {display:flex; justify-content:space-between; margin-top:40px}
.form-actions .btn {padding:12px 25px; border-radius:25px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .3s ease}
.form-actions .btn:hover {transform:translateY(-3px); box-shadow:0 6px 12px #0000000d}
.pet-actions {display:flex; gap:15px; margin-top:15px}
.pet-actions .btn {padding:8px 15px; border-radius:25px; font-weight:500; display:flex; align-items:center; gap:5px; transition:all .3s ease}
.pet-actions .btn:hover {transform:translateY(-2px); box-shadow:0 4px 8px #0000000d}
.action-buttons {display:flex; gap:10px; flex-wrap:wrap; margin-top:15px}
.action-buttons .btn {padding:8px 16px; border-radius:20px; font-weight:500; display:flex; align-items:center; gap:6px; transition:all .3s ease; font-size:.85rem}
.action-buttons .btn:hover {transform:translateY(-2px); box-shadow:0 4px 8px #0000000d}

@keyframes fadeIn {
  from {opacity:0}
  to {opacity:1}
}

@keyframes slideUp {
  from {transform:translateY(30px); opacity:0}
  to {transform:translateY(0); opacity:1}
}

.pet-section .form-content {padding-left:55px}
.custom-select {width:100%; padding:12px 15px; border:2px solid #e9ecef; border-radius:10px; font-size:1rem; color:#2c3e50; background-color:#fff; transition:all .3s ease}
.custom-select:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,154,139,0.1)}
.pricing-section {border-radius:12px;margin-top:20px}
.pricing-notice {display:flex; align-items:center; justify-content:center; gap:10px; color:#7f8c8d; font-style:italic}
.pricing-notice i {color:var(--primary); font-size:1.2rem}
.pricing-content h5 {color:#2c3e50; margin:0 0 15px; font-weight:600}
.additional-list {display:flex; flex-direction:column; gap:8px}
.additional-item {display:flex; justify-content:space-between; align-items:center; padding:6px 0}
/* Booking form specific styles (prefixed to avoid conflicts) */
.booking-form-container .service-features-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:20px; background:#f8f9fa; border-radius:8px}
.booking-form-container .service-feature-card {background:#fff; border:1px solid #e9ecef; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; transition:all .2s ease}
.booking-form-container .service-feature-card:hover {box-shadow:0 2px 8px #0000001a; border-color:var(--primary)}
.booking-form-container .feature-name {font-weight:600; color:#212529; font-size:.9rem; line-height:1.3}
.booking-form-container .feature-price {display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.booking-form-container .old-price {text-decoration:line-through; color:#6c757d; font-size:.8rem}
.booking-form-container .current-price {color:#e67e22; font-weight:600; font-size:.85rem; background:#fff3cd; padding:2px 8px; border-radius:12px; border:1px solid #ffeaa7}
.booking-form-container .current-price.free {color:#28a745 !important; background:#d4edda; border-color:#c3e6cb}

/* Pricing area */
.booking-form-container .pet-size {color:#6c757d; font-weight:400; font-size:.85rem}

/* Sections - Unified styling */
.booking-form-container .service-selection-section {margin-bottom:25px;}
.booking-form-container .section-header-unified {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.booking-form-container .section-header-unified h5 {color:#495057; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; font-size:1.1rem}
.booking-form-container .section-header-unified h5 i {font-size:1.2rem}
.booking-form-container .base-service-selection .section-header-unified h5 i {color:#ffc107}
.booking-form-container .additional-services-selection .section-header-unified h5 i {color:#28a745}
.booking-form-container .section-badge {padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px}
.booking-form-container .section-badge.required {background:#fff3cd; color:#856404; border:1px solid #ffeaa7}
.booking-form-container .section-badge.optional {background:#d4edda; color:#155724; border:1px solid #c3e6cb}
.booking-form-container .service-note {color:#6c757d; font-size:.9rem; margin-bottom:15px; font-style:italic}

/* Legacy section support for backward compatibility */
.booking-form-container .base-service-selection {margin-bottom:25px}
.booking-form-container .base-service-selection h5 {color:#495057; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.booking-form-container .base-service-selection h5 i {color:#ffc107}
.booking-form-container .additional-services-selection {margin-bottom:25px}
.booking-form-container .additional-services-selection h5 {color:#28a745; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.booking-form-container .additional-note {color:#6c757d; font-size:.9rem; margin-bottom:15px}
.booking-form-container .additional-services-list {display:flex; flex-direction:column; gap:10px}

/* Service option */
.booking-form-container .service-option {border:1px solid #e9ecef; border-radius:15px;position:relative}
.booking-form-container .service-option.base-service {background:linear-gradient(135deg,#f8f9fa,#fff)}
.booking-form-container .service-option.base-service:hover {border-color:var(--primary); box-shadow:0 2px 8px rgba(91,154,139,.2)}
.booking-form-container .service-option.additional-service:hover {border-color:#28a745; box-shadow:0 2px 8px rgba(40,167,69,.15)}

/* Base service container for multiple options */
.booking-form-container .base-service-selection .service-option-content {background:linear-gradient(135deg,#f8f9fa,#fff);overflow:hidden;border-radius: 15px;}
.booking-form-container .base-service-selection .service-option-content.validation-error-border {border-color:#dc3545!important; background:linear-gradient(135deg,#f8d7da,#fff)!important; box-shadow:0 2px 8px rgba(220,53,69,.2)!important}

/* Service info display (no selection needed) */
.booking-form-container .base-service-selection .service-info-content { transition:all .3s ease; overflow:hidden}
.booking-form-container .base-service-selection .service-info-item {display:flex; justify-content:space-between; align-items:center; padding:12px 20px;background: linear-gradient(135deg, #f0f8ff, #fff);border-radius:15px;margin-bottom:10px;border:solid 1px #e6e7ec;}

.booking-form-container .service-option-label {display:block; cursor:pointer; margin:0; padding:0; width:100%}
.booking-form-container .service-option-content {display:flex; justify-content:space-between; align-items:center; padding:8px; transition:all .3s ease; position:relative}

/* Base service option labels inside the container */
.booking-form-container .base-service-selection .service-option-label {display:flex; justify-content:space-between; align-items:center; padding:12px 20px 12px 50px; border-bottom:1px solid #e9ecef; transition:all .3s ease; position:relative}
.booking-form-container .base-service-selection .service-option-label:hover {background:rgba(0,123,255,.05)}
.booking-form-container .service-option-info {display:flex; flex-direction:column; gap:4px; flex:1;padding-left: 44px}
.booking-form-container .service-name {font-weight:600; color:#212529; font-size:14px;}
.booking-form-container .service-desc {color:#6c757d; font-size:.85rem}
.booking-form-container .service-price {font-weight:700; font-size:1.1rem; color:#e67e22; background:#fff3cd; padding:8px 14px; border-radius:20px; border:1px solid #ffeaa7}
.booking-form-container .service-price-free {font-weight:700; font-size:14px; color:#28a745;padding:8px 14px; border-radius:20px;}
.booking-form-container .service-radio,.booking-form-container .service-checkbox {position:absolute; left:20px; top:50%; transform:translateY(-50%); width:18px; height:18px; margin:0; cursor:pointer; z-index:1}
.booking-form-container .service-radio {accent-color:#007bff}
.booking-form-container .service-checkbox {accent-color:#28a745}

/* Radio button positioning for base service labels */
.booking-form-container .base-service-selection .service-option-label .service-radio {position:absolute; left:20px; top:50%; transform:translateY(-50%); width:18px; height:18px; margin:0; cursor:pointer; z-index:1; accent-color:var(--primary)}
.booking-form-container .service-option:has(input:checked) {border-color:var(--primary); background:linear-gradient(135deg,var(--primary-light),#fff); box-shadow:0 4px 12px rgba(91,154,139,.2)}
.booking-form-container .service-option.base-service:has(input:checked) {border-color:var(--primary); background:linear-gradient(135deg,var(--primary-light),#fff); box-shadow:0 4px 12px rgba(91,154,139,.25)}
.booking-form-container .service-option.additional-service:has(input:checked) {border-color:#28a745; background:linear-gradient(135deg,#d4edda,#fff); box-shadow:0 4px 12px rgba(40,167,69,.2)}

/* Base service container selection state */
.booking-form-container .base-service-selection .service-option-content:has(input:checked) {border-color:var(--primary); background:linear-gradient(135deg,var(--primary-light),#fff); box-shadow:0 4px 12px rgba(91,154,139,.25)}
.booking-form-container .base-service-selection .service-option-label:has(input:checked) {background:rgba(91,154,139,.1); color:var(--primary-dark)}
.booking-form-container .base-service-selection .service-option-label:has(input:checked) .service-name {color:var(--primary-dark);}
.booking-form-container .service-option.validation-error-border {border-color:#dc3545!important; background:linear-gradient(135deg,#f8d7da,#fff)!important; box-shadow:0 2px 8px rgba(220,53,69,.2)!important}

/* Price summary */
.booking-form-container .price-summary-simple {margin-top:20px; padding:15px 0; border-top:1px solid #dee2e6}
.booking-form-container .estimated-total {display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; font-weight:600; margin-bottom:8px}
.booking-form-container .total-label {color:#495057}
.booking-form-container .total-amount {color:#28a745; font-weight:700; font-size:1.2rem; transition:transform .2s ease}
.booking-form-container .price-disclaimer-simple {display:flex; align-items:flex-start; gap:6px; font-size:.8rem; color:#6c757d; line-height:1.3}
.booking-form-container .price-disclaimer-simple i {color:#6c757d; margin-top:2px; flex-shrink:0}

/* Validation helpers */
.booking-form-container .form-label.error {color:#dc3545!important; font-weight:600}
.booking-form-container .validation-error {color:#dc3545; font-size:.875rem; margin-top:.25rem; display:block}
.booking-form-container .form-select.error {border-color:#dc3545!important; box-shadow:0 0 0 .2rem rgba(220,53,69,.25)!important}
.booking-form-container .form-select.error:focus {border-color:#dc3545!important; box-shadow:0 0 0 .2rem rgba(220,53,69,.25)!important}
.service-card {background:#f8f9fa; border-radius:12px; padding:20px; margin-left:55px; margin-top:10px; display:flex; align-items:center; gap:20px; transition:all .3s ease}
.service-card:hover {background:#e8f4fd; transform:translateY(-2px)}
.service-card .service-details {flex-grow:1}
.service-card .service-details h4 {margin:0 0 10px; color:#2c3e50; font-weight:600}
.service-info {color:#7f8c8d; line-height:1.6; margin:0}
.admin-note-section .admin-note {background:#fff3cd; border:1px solid #ffeaa7; border-radius:8px; padding:15px; margin-left:55px; color:#856404; font-style:italic}
.service-types-grid {display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.service-type-card {background:#fff; border-radius:14px; padding:16px; cursor:pointer; display:flex; align-items:center; gap:16px; box-shadow:0 2px 8px rgba(0,0,0,0.06); border:1px solid #f0f0f0; transition:all .3s ease; position:relative; overflow:hidden}
.service-type-card::before {content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; transition:opacity .3s ease; opacity:0}
.service-type-card:hover {box-shadow:0 6px 20px rgba(0,0,0,0.1); transform:translateY(-2px); border-color:transparent}
.service-type-card:hover::before {opacity:1}
.service-type-card:active {transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.service-type-card .service-icon {width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; transition:transform .3s ease}
.service-type-card:hover .service-icon {transform:scale(1.08)}
.service-type-card:nth-child(1) .service-icon {background:linear-gradient(135deg,#5b9a8b,#67ad9c); color:#fff; box-shadow:0 4px 12px rgba(91,154,139,0.3)}
.service-type-card:nth-child(2) .service-icon {background:linear-gradient(135deg,#3498db,#5dade2); color:#fff; box-shadow:0 4px 12px rgba(52,152,219,0.3)}
.service-type-card:nth-child(3) .service-icon {background:linear-gradient(135deg,#f39c12,#f1c40f); color:#fff; box-shadow:0 4px 12px rgba(243,156,18,0.3)}
.service-type-card:nth-child(4) .service-icon {background:linear-gradient(135deg,#e74c3c,#ec7063); color:#fff; box-shadow:0 4px 12px rgba(231,76,60,0.3)}
.service-type-card:nth-child(1)::before {background:linear-gradient(180deg,#5b9a8b,#67ad9c)}
.service-type-card:nth-child(2)::before {background:linear-gradient(180deg,#3498db,#5dade2)}
.service-type-card:nth-child(3)::before {background:linear-gradient(180deg,#f39c12,#f1c40f)}
.service-type-card:nth-child(4)::before {background:linear-gradient(180deg,#e74c3c,#ec7063)}
.service-type-info {flex:1; min-width:0}
.service-type-card h3 {color:#2c3e50; margin:0 0 4px; font-weight:700; font-size:1.05rem; line-height:1.3}
.service-type-card p {color:#7f8c8d; margin:0 0 6px; font-size:.88rem; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.service-type-card .price-link {color:var(--primary); text-decoration:none; font-weight:600; font-size:.8rem; display:inline-flex; align-items:center; gap:2px; transition:color .2s ease}
.service-type-card .price-link:hover {color:var(--primary-dark)}
.service-type-arrow {color:#bdc3c7; font-size:1.2rem; flex-shrink:0; transition:all .3s ease; padding-left:4px}
.service-type-card:hover .service-type-arrow {color:var(--primary); transform:translateX(3px)}
@media (min-width:768px) {
  .service-types-grid {display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .service-type-card {padding:20px; gap:18px}
  .service-type-card .service-icon {width:56px; height:56px; font-size:1.6rem}
  .service-type-card p {white-space:normal}
}
.incomplete-bookings-section {margin:50px 0 40px}
.incomplete-bookings-section .section-header {text-align:center; margin-bottom:30px}
.incomplete-bookings-section .section-title {color:#2c3e50; font-size:2rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:12px}
.incomplete-bookings-section .section-title i {color:#f39c12; font-size:1.8rem}
.incomplete-bookings-section .section-subtitle {color:#7f8c8d; font-size:1.1rem; margin:0}
.incomplete-bookings-container {max-width:900px; margin:0 auto}
.quick-actions {background:transparent; border-radius:0; padding:20px 0 0; box-shadow:none; margin-top:30px; border:none; border-top:1px solid #eee; position:relative; overflow:hidden; z-index:1}
.quick-actions h3 {color:#adb5bd; margin-bottom:12px; font-weight:500; display:flex; align-items:center; gap:8px; font-size:.85rem; letter-spacing:.3px; text-transform:uppercase}
.quick-actions h3::before {content:'⚡'; font-size:.9rem; opacity:.6}
.quick-actions .action-buttons {display:flex; flex-wrap:wrap; gap:6px 16px}
.quick-actions .action-buttons .btn {padding:6px 0; border-radius:0; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:all .2s ease; background:transparent; border:none; color:#95a5a6; font-size:.88rem; white-space:nowrap; box-shadow:none}
.quick-actions .action-buttons .btn i {font-size:.95rem; transition:color 0.2s ease}
.quick-actions .action-buttons .btn:hover {transform:none; box-shadow:none; border:none; color:var(--primary); background:transparent}
.quick-actions .action-buttons .btn:hover i {transform:none; color:var(--primary)}
@media (max-width:767px) {
  .quick-actions {background:#f8f9fa; border-radius:12px; padding:16px; border:none; border-top:none; box-shadow:0 1px 4px rgba(0,0,0,0.04)}
  .quick-actions h3 {font-size:.8rem; margin-bottom:10px}
  .quick-actions .action-buttons {display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .quick-actions .action-buttons .btn {padding:10px 8px; border-radius:10px; background:#fff; border:1px solid #eee; color:#6c757d; justify-content:center; font-size:.84rem}
  .quick-actions .action-buttons .btn:hover {background:var(--primary-light); border-color:var(--primary); color:var(--primary)}
}
.booking-list {display:flex; flex-direction:column; gap:0}
.service-icon {width:45px; height:45px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem}
.service-details h4 {margin:0 0 5px; color:#2c3e50; font-weight:600; font-size:1.1rem}
.pet-name {margin:0; color:#7f8c8d; font-size:.9rem}
/*.status-badge {padding:6px 12px; border-radius:20px; color:#fff; font-size:.85rem; font-weight:500; display:inline-flex; align-items:center; gap:5px}*/
.detail-item {display:flex; align-items:center; gap:8px; color:#495057; font-size:.9rem}
.detail-item i {color:#6c757d; width:16px}
.detail-item.incomplete {color:#e67e22}
.detail-item.incomplete i {color:#e67e22}
.booking-notes-unified {background: #f5f5f5; border-radius: 12px; padding: 12px 15px; font-size: 0.9rem; line-height: 1.5;}
.booking-actions {display:flex; gap:10px; flex-wrap:wrap;padding:15px 0;}
.no-bookings {text-align:center; padding:60px 20px}
.no-bookings-icon {font-size:4rem; color:#bdc3c7; margin-bottom:20px}
.no-bookings h3 {color:#2c3e50; margin-bottom:15px; font-weight:600}
.no-bookings p {color:#7f8c8d; margin-bottom:25px; font-size:1.1rem; max-width:400px; margin-left:auto; margin-right:auto}
.booking-form-container {margin:0 auto; padding:20px}
.book-header {text-align:center; margin-bottom:30px}
.book-title {color:#2c3e50; font-size:2rem; font-weight:700; margin-bottom:10px}
.book-subtitle {color:#6c757d; font-size:1.1rem; margin:0}
.section-header {display:flex; align-items:center; margin-bottom:20px;}
.section-icon {width:40px; height:40px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; margin-right:15px; font-size:1.2rem}
.section-title {color:#2c3e50; font-size:1.3rem; font-weight:600; margin:0}
.datetime-container {display:grid; gap:25px}
.date-picker-container {position:relative}
.form-label {display:block; font-weight:600; color:#2c3e50; margin-bottom:8px; font-size:1rem}
.date-picker-wrapper {position:relative; max-width:250px}
.date-picker {width:100%; padding:12px 45px 12px 15px; border:2px solid #e9ecef; border-radius:8px; font-size:1rem; background:#fff; cursor:pointer; transition:border-color .3s ease}
.date-picker:focus {outline:none; border-color:#007bff; box-shadow:0 0 0 3px #007bff1a}
.date-icon {position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#6c757d; font-size:1.2rem; pointer-events:none}
.time-slots-container {animation:slideDown .3s ease}

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

.time-slots-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:10px}
.time-slot-btn {padding:12px 16px; border:2px solid #e9ecef; border-radius:8px; background:#fff; color:#495057; font-weight:500; cursor:pointer; transition:all .3s ease; text-align:center}
.time-slot-btn:hover:not(:disabled) {border-color:var(--primary); background:var(--primary-light); color:var(--primary)}
.time-slot-btn.selected {background:var(--primary); border-color:var(--primary); color:#fff}
.time-slot-btn.occupied {background:#f8f9fa; border-color:#dee2e6; color:#6c757d; cursor:not-allowed}
.occupied-label {font-size:.8rem; font-style:italic}
.appointment-confirmation {margin:20px 0; padding:15px 20px; background:linear-gradient(135deg,#d4edda,#c3e6cb); border:1px solid #c3e6cb; border-radius:8px; animation:fadeIn .5s ease}

@keyframes fadeIn {
  from {opacity:0}
  to {opacity:1}
}

.confirmation-content {display:flex; align-items:center; gap:15px}
.confirmation-content i {color:#155724; font-size:1.5rem}
.confirmation-text {color:#155724; font-size:1rem}
.form-control {width:100%; padding:12px 15px; border:2px solid #e9ecef; border-radius:8px; font-size:1rem; transition:border-color .3s ease}
.form-control:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,154,139,0.1)}
.pet-form-header {text-align:center; margin: 10px 0 20px 0}
.pet-form-subtitle {color:#7f8c8d; font-size:1.2rem; margin-bottom:0}
.pet-form-container {background:#fff; border-radius:15px; padding:40px; box-shadow:0 4px 6px #0000001a; margin-bottom:30px}
.pet-form {max-width:800px; margin:0 auto}
.checkbox-group {display:flex; align-items:center}
.checkbox-label {display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:500; color:#2c3e50}
.checkbox-text {font-size:14px}
.checkbox-group .form-checkbox {position:relative; appearance:none; width:20px; height:20px; border:2px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; transition:all .3s ease}
.checkbox-group .form-checkbox:checked {background:var(--primary); border-color:var(--primary)}
.checkbox-group .form-checkbox:checked::after {content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:12px; font-weight:700}
.radio-group-container {margin-top:5px}
.radio-group {display:flex; flex-wrap:wrap; gap:10px}
.radio-item {flex:1; min-width:150px}
.radio-item input[type="radio"] {display:none}
.radio-label {display:flex; flex-direction:column; padding:12px 15px; background:#f8f9fa; border:2px solid #e9ecef; border-radius:8px; cursor:pointer; transition:all .3s ease; width:100%; box-sizing:border-box}
.radio-item input[type="radio"]:checked + .radio-label {border-color:var(--primary); background:var(--primary-light)}
.radio-label:hover {background:#e9ecef; transform:translateY(-2px)}
.size-name {font-weight:600; color:#2c3e50; text-transform:capitalize; margin-bottom:4px}
.size-type {color:#7f8c8d; font-size:.9em}
.gender-name {font-weight:600; color:#2c3e50; text-transform:capitalize}
.form-label.error {color:#e74c3c!important}
.validation-error {color:#e74c3c; font-size:12px; margin-top:5px; display:block; font-weight:500}
.vaccination-proof-info {border-left:4px solid #28a745; background:#f6fff8; padding:12px 14px; border-radius:8px; margin:8px 0 12px 0; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.vaccination-proof-info__content {display:flex; flex-direction:column; gap:6px}
.vaccination-proof-info__title {font-weight:600; color:#1e7e34; display:flex; align-items:center; gap:8px}
.vaccination-proof-info__title i {color:#28a745}
.vaccination-proof-info__actions {display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.vaccination-proof-info__link {color:#28a745; text-decoration:none; font-weight:600}
.vaccination-proof-info__link:hover {text-decoration:underline}
.vaccination-proof-info__hint {color:#6c757d; font-size:.9em}
/* Modern Pet Form Page Styles */
.pet-form-page {max-width:1000px; margin:0 auto; padding:0 20px 40px}
.pet-form-page-header {text-align:center; padding:40px 20px; background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%); border-radius:20px; margin-bottom:30px; position:relative; overflow:hidden}
.pet-form-page-header::before {content:''; position:absolute; top:-50%; left:-10%; width:300px; height:300px; background:radial-gradient(circle,rgba(91,154,139,0.15) 0%,transparent 70%); border-radius:50%}
.pet-form-page-title {color:#2c3e50; font-size:2.2rem; font-weight:700; margin:0 0 10px 0; position:relative; z-index:1}
.pet-form-page-subtitle {color:#6c757d; font-size:1.1rem; margin:0; position:relative; z-index:1}
.pet-form-input.has-error,
.pet-form-group .has-error { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; }
.pet-size-group.has-error { border: 2px solid #dc3545; border-radius: 8px; padding: 10px; }
.pet-form-error,
.field-error-message { color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; display: block; }
.pet-allergy-details { margin-top: 15px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #ffc107; }
.pet-allergy-details .pet-form-label { font-weight: 600; color: #495057; margin-bottom: 8px; }
.pet-allergy-details .pet-form-input { background-color: #fff; border: 1px solid #ced4da; }
.behavior-summary-item { padding: 8px 0; transition: all 0.3s ease; }
.behavior-summary-item.checked { color: #495057; font-weight: 500; }
.behavior-summary-item.unchecked { color: #adb5bd; }
.behavior-summary-icon { display: inline-block; width: 20px; font-weight: bold; margin-right: 5px; }
.behavior-summary-icon.checked { color: #28a745; }
.behavior-summary-icon.unchecked { color: #adb5bd; }
.pet-allergy-details { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out, margin-top 0.4s ease-out; padding-top: 0; padding-bottom: 0; margin-top: 0; }
.pet-allergy-details.show { max-height: 200px; opacity: 1; padding-top: 15px; padding-bottom: 15px; margin-top: 15px; }
/* Pet Form Card */
.pet-form-card {background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,0.08); overflow:hidden}
.pet-form-modern {padding:0}

/* Pet Form Section */
.pet-form-section {border-bottom:1px solid #f0f0f0}
.pet-form-section:last-of-type {border-bottom:none}
.pet-form-section-header {padding:25px 30px; background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%); display:flex; align-items:center; gap:15px}
.section-header-icon {width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background:linear-gradient(135deg,var(--primary),var(--primary-hover)); color:#fff; box-shadow:0 4px 12px rgba(91,154,139,0.25)}
.section-header-icon-health {background:linear-gradient(135deg,#28a745,#20c997)}
.section-header-icon-warning {background:linear-gradient(135deg,#ffc107,#fd7e14)}
.section-header-icon-note {background:linear-gradient(135deg,#3498db,#5dade2)}
.section-header-text {flex:1}
.section-header-title {color:#2c3e50; font-size:1.3rem; font-weight:700; margin:0 0 4px 0}
.section-header-desc {color:#6c757d; font-size:0.95rem; margin:0}
.pet-form-section-body {padding:30px}

/* Pet Form Groups and Rows */
.pet-form-row {display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.pet-form-row-full {margin-bottom:20px}
.pet-form-group {display:flex; flex-direction:column}
.pet-form-label {display:block; font-weight:600; color:#2c3e50; margin-bottom:8px; font-size:0.95rem; display:flex; align-items:center; gap:6px}
.pet-form-label.error {color:#e74c3c}
.pet-form-input {width:100%; padding:12px 16px; border:2px solid #e9ecef; border-radius:10px; font-size:1rem; transition:all 0.3s ease; background:#fff; box-sizing:border-box}
.pet-form-input:hover {border-color:#d1d5db}
.pet-form-input:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(91,154,139,0.1); background:#fff}
.pet-form-input::placeholder {color:#9ca3af}
.pet-form-error {color:#e74c3c; font-size:0.85rem; margin-top:6px; display:block; font-weight:500}
.pet-validation-error {color:#e74c3c; font-size:0.85rem; margin-top:8px; display:block; font-weight:500}

/* Radio Groups */
.pet-radio-group {display:flex; gap:12px; flex-wrap:wrap}
.pet-radio-item {flex:1; min-width:120px}
.pet-size-group {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.pet-radio-input {display:none}
.pet-radio-label {display:flex; flex-direction:column; padding:14px 16px; background:#f8f9fa; border:2px solid #e9ecef; border-radius:10px; cursor:pointer; transition:all 0.3s ease; text-align:center; height:100%}
.pet-radio-label:hover {background:#e9ecef; border-color:#d1d5db; transform:translateY(-2px)}
.pet-radio-input:checked + .pet-radio-label {border-color:var(--primary); background:var(--primary-light); box-shadow:0 4px 12px rgba(91,154,139,0.2)}
.pet-radio-text {font-weight:600; color:#2c3e50; font-size:0.95rem}
.pet-size-label {gap:6px}
.pet-size-name {font-weight:700; color:#2c3e50; font-size:1rem}
.pet-size-type {color:#6c757d; font-size:0.85rem; margin-top:4px}
.pet-weight-info {background:#e8f5f2; border-left:4px solid var(--primary); border-radius:8px; padding:12px 15px; margin-top:12px; display:flex; gap:10px; align-items:flex-start; color:#2c3e50; font-size:0.9rem}
.pet-weight-info i {color:var(--primary); font-size:1.1rem; margin-top:2px; flex-shrink:0}

/* Checkbox Styles */
.pet-checkbox-wrapper {display:flex; align-items:center; gap:12px}
.pet-checkbox-wrapper label {display:flex; align-items:center; gap:10px;}
.pet-checkbox-input {width:22px; height:22px; border:2px solid #dee2e6; border-radius:6px; background:#fff; cursor:pointer; transition:all 0.3s ease; position:relative; flex-shrink:0; appearance:none}
.pet-checkbox-input:hover {border-color:var(--primary)}
.pet-checkbox-input:checked {background:var(--primary); border-color:var(--primary)}
.pet-checkbox-input:checked::after {content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:14px; font-weight:700}
.pet-checkbox-label {display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:500; color:#2c3e50; cursor:pointer; margin:0}
.pet-checkbox-text {line-height:1.4}

/* Vaccination Box */
.pet-vaccination-box {background:#f8f9fa; border-radius:12px; padding:15px}
.pet-vaccination-details {margin-top:20px;}
.pet-vaccination-proof-info {background:#e8f5f2; border-left:4px solid #28a745; border-radius:8px; padding:15px; margin-bottom:15px}
.proof-info-content {display:flex; flex-direction:column; gap:10px}
.proof-info-title {font-weight:600; color:#155724; display:flex; align-items:center; gap:8px; font-size:0.95rem}
.proof-info-title i {color:#28a745; font-size:1.1rem}
.proof-info-actions {display:flex; flex-direction:column; gap:8px}
.proof-info-link {color:#28a745; text-decoration:none; font-weight:600; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px}
.proof-info-link:hover {text-decoration:underline}
.proof-info-hint {color:#6c757d; font-size:0.85rem; font-style:italic}
.pet-file-input {width:100%; padding:14px 16px; border:2px dashed #28a745; border-radius:10px; font-size:0.95rem; transition:all 0.3s ease; cursor:pointer; background:#fff}
.pet-file-input:hover {border-color:#20c997; background:#f8fff9}
.pet-file-hint {font-size:0.85rem; color:#6c757d; margin-top:8px; font-style:italic}

/* Behavior Grid */
.pet-behavior-grid {display:grid; grid-template-columns:1fr 1fr; gap:15px}
.pet-behavior-item {background:#fff; border:2px solid #e9ecef; border-radius:12px; padding:18px 5px 18px 18px; transition:all 0.3s ease; cursor:pointer}
.pet-behavior-item:hover {border-color:#ffc107; transform:translateY(-2px); box-shadow:0 4px 12px rgba(255,193,7,0.15)}
.pet-behavior-item:has(.pet-checkbox-input:checked) {background:#fff3cd; border-color:#ffeaa7}
.pet-behavior-item:has(.pet-checkbox-input:checked):hover {background:#ffeaa7; border-color:#ffc107; box-shadow:0 4px 12px rgba(255,193,7,0.2)}
.pet-behavior-checkbox .pet-checkbox-input:checked {background:#ffc107; border-color:#ffc107}
.pet-behavior-label {font-weight:600; color:#2c3e50}
.pet-behavior-item:has(.pet-checkbox-input:checked) .pet-behavior-label {color:#856404}
.pet-behavior-label i {color:#ffc107; font-size:1.2rem}
.pet-behavior-content {display:flex; flex-direction:column; gap:4px}
.pet-behavior-hint {display:block; font-size:0.85rem; font-weight:400; color:#6c757d; line-height:1.4; margin-top:4px}
.pet-behavior-item:has(.pet-checkbox-input:checked) .pet-behavior-hint {color:#856404; opacity:0.9}

/* Form Actions */
.pet-form-actions {padding:30px; background:#f8f9fa; display:flex; justify-content:space-between; gap:15px}
.pet-form-btn {flex:1; max-width:200px; padding:14px 24px; border-radius:12px; font-weight:600; font-size:1rem; display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.3s ease; text-decoration:none; border:none; cursor:pointer}
.pet-form-btn i {font-size:1.2rem}
.pet-form-btn-secondary {background:#fff; color:#6c757d; border:2px solid #e9ecef}
.pet-form-btn-secondary:hover {background:#f8f9fa; border-color:#d1d5db; color:#495057; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.pet-form-btn-primary {background:linear-gradient(135deg,var(--primary),var(--primary-hover)); color:#fff; border:none; box-shadow:0 4px 12px rgba(91,154,139,0.3)}
.pet-form-btn-primary:hover {background:linear-gradient(135deg,var(--primary-dark),var(--primary)); transform:translateY(-2px); box-shadow:0 6px 16px rgba(91,154,139,0.4); color:#fff}
.pet-form-btn-primary:disabled {opacity:0.6; cursor:not-allowed; transform:none}

/* Modern Pets Page Styles */
.pets-page-container {max-width:1400px; margin:0 auto; padding:0}
.pets-page-header {background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%); border-radius:20px; padding:30px 40px; margin-bottom:35px; box-shadow:0 4px 20px rgba(91,154,139,0.1); position:relative; overflow:hidden}
.pets-page-header::before {content:''; position:absolute; top:-50%; right:-10%; width:300px; height:300px; background:radial-gradient(circle,rgba(91,154,139,0.1) 0%,transparent 70%); border-radius:50%}
.pets-header-content {display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; z-index:1}
.pets-header-text {flex:1}
.pets-page-title {color:#2c3e50; font-size:2.5rem; font-weight:700; margin:0 0 8px 0; display:flex; align-items:center; gap:15px}
.pets-page-title i {color:var(--primary); font-size:2.2rem}
.pets-page-subtitle {color:#6c757d; font-size:1.1rem; margin:0}
.pets-add-btn {white-space:nowrap; box-shadow:0 4px 12px rgba(91,154,139,0.25)}
.pets-add-btn span {display:inline}

/* Empty State */
.pets-empty-state {text-align:center; padding:80px 30px; background:#fff; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,0.06); max-width:600px; margin:0 auto}
.empty-state-icon {width:120px; height:120px; margin:0 auto 25px; background:linear-gradient(135deg,var(--primary-light),#e8f5f2); border-radius:50%; display:flex; align-items:center; justify-content:center}
.empty-state-icon i {font-size:4rem; color:var(--primary)}
.empty-state-title {color:#2c3e50; font-size:1.8rem; font-weight:700; margin:0 0 12px 0}
.empty-state-text {color:#6c757d; font-size:1.1rem; margin:0 0 30px 0; line-height:1.6}

/* Modern Pet Cards Grid */
.pets-grid-modern {display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:25px; margin-bottom:40px}

/* Modern Pet Card */
.pet-card-modern {background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:all 0.3s ease; border:2px solid transparent; display:flex; flex-direction:column}
.pet-card-modern:hover {transform:translateY(-8px); box-shadow:0 12px 28px rgba(0,0,0,0.12); border-color:var(--primary-light)}

/* Pet Card Header with Avatar */
.pet-card-header {position:relative; height:200px; background:linear-gradient(135deg,var(--primary-light) 0%,#f8f9fa 100%); display:flex; align-items:center; justify-content:center; overflow:hidden}
.pet-card-header::before {content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%); animation:float 15s ease-in-out infinite}
.pet-avatar-modern {width:120px; height:120px; border-radius:50%; overflow:hidden; border:5px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,0.15); transition:transform 0.3s ease; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; background:#fff}
.pet-avatar-modern:hover {transform:scale(1.08)}
.pet-avatar-modern img {width:100%; height:100%; object-fit:cover}
.pet-avatar-placeholder {width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f8f9fa,#e9ecef)}
.pet-avatar-placeholder img {width:60%; height:60%; object-fit:contain}
.pet-avatar-placeholder i {font-size:3rem; color:var(--primary)}

/* Top Action Icons */
.pet-card-actions-top {position:absolute; top:15px; right:15px; display:flex; gap:8px; z-index:3}
.pet-action-icon {width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.95); display:flex; align-items:center; justify-content:center; color:#6c757d; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.1); text-decoration:none}
.pet-action-icon:hover {background:#fff; color:var(--primary); transform:scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.pet-action-icon.pet-action-delete:hover {color:#e74c3c; background:#fff}

/* Pet Card Body */
.pet-card-body {padding:25px; flex:1; display:flex; flex-direction:column; gap:15px}
.pet-name-modern {color:#2c3e50; font-size:1.5rem; font-weight:700; margin:0; text-align:center}

/* Pet Info Row */
.pet-info-row {display:flex; justify-content:center; gap:20px; flex-wrap:wrap}
.pet-info-item {display:flex; align-items:center; gap:6px; color:#6c757d; font-size:0.95rem; background:#f8f9fa; padding:6px 14px; border-radius:20px; font-weight:500}
.pet-info-item i {color:var(--primary); font-size:1.1rem}

/* Pet Badges */
.pet-badges {display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pet-badge {display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; font-size:0.8rem; font-weight:600; transition:all 0.3s ease; position:relative; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.pet-badge::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:inherit; opacity:0.9; z-index:-1; transition:opacity 0.3s ease}
.pet-badge:hover {transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.pet-badge:hover::before {opacity:1}
.pet-badge i {font-size:0.9rem}
.pet-badge-success {background:linear-gradient(135deg,#d4edda,#c3e6cb); color:#155724; border:1px solid #c3e6cb}
.pet-badge-warning {background:linear-gradient(135deg,#fff3cd,#ffeaa7); color:#856404; border:1px solid #ffeaa7}

/* Bootstrap Tooltip Customization */
.tooltip-inner {max-width:200px; padding:8px 12px; font-size:0.85rem; text-align:center}

/* Pet Note */
.pet-note-modern {background:#f8f9fa; border-left:4px solid var(--primary); border-radius:8px; padding:12px 15px; display:flex; gap:10px; align-items:flex-start}
.pet-note-modern i {color:var(--primary); font-size:1.1rem; margin-top:2px; flex-shrink:0}
.pet-note-modern p {margin:0; color:#495057; font-size:0.9rem; line-height:1.5}

/* Pet Card Footer */
.pet-card-footer {display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #f0f0f0}
.pet-footer-btn {display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; color:#6c757d; font-weight:600; font-size:0.9rem; transition:all 0.3s ease; text-decoration:none; background:#fff}
.pet-footer-btn:hover {background:#f8f9fa; color:var(--primary)}
.pet-footer-btn i {font-size:1.1rem}
.pet-footer-btn:first-child {border-right:1px solid #f0f0f0}
.pet-footer-btn-primary {color:var(--primary)}
.pet-footer-btn-primary:hover {background:var(--primary-light); color:var(--primary-dark)}
/* Profile Page Styles */
.profile-content {display:grid; grid-template-columns:1fr 380px; gap:30px; max-width:1400px; margin:0 auto}
.profile-main {min-width:0}
.profile-card {background:linear-gradient(135deg,#ffffff 0%,#f8fafb 100%); border-radius:15px; padding:35px; box-shadow:0 4px 12px rgba(0,0,0,0.08); position:relative; overflow:hidden; border:1px solid rgba(91,154,139,0.1); z-index:1}
.profile-card::before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.profile-card h3 {color:#2c3e50; margin-bottom:30px; font-weight:700; font-size:1.5rem; display:flex; align-items:center; gap:10px}
.profile-card h3::before {content:'👤'; font-size:1.8rem}
.profile-sidebar {min-width:0; max-width:380px}
.account-status {background-color: #FFFFFF; border-radius:15px; padding:25px; box-shadow:0 4px 12px rgba(0,0,0,0.08); margin-bottom:20px; border:1px solid rgba(91,154,139,0.1); position:sticky; top:100px; z-index:10; overflow:hidden}
.account-status::before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.account-status h4 {color:#2c3e50; margin-bottom:20px; font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:8px}
.account-status h4::before {content:'✓'; font-size:1.3rem; color:var(--primary)}

/* Profile Tip Card */
.profile-tip-card {background:linear-gradient(135deg,rgba(91,154,139,0.08),rgba(103,173,156,0.08)); border-radius:15px; padding:20px; border:1px solid rgba(91,154,139,0.15); position:relative; overflow:hidden}
.profile-tip-card::before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.profile-tip-card .tip-icon {font-size:2rem; margin-bottom:10px}
.profile-tip-card h5 {color:#2c3e50; font-size:1rem; font-weight:700; margin-bottom:15px}
.profile-tip-card .tip-list {list-style:none; padding:0; margin:0}
.profile-tip-card .tip-list li {color:#495057; font-size:0.9rem; padding:8px 0 8px 24px; position:relative; line-height:1.5}
.profile-tip-card .tip-list li::before {content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:700}

.status-item {display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:12px 15px;}
.status-item:last-child {margin-bottom:0}
.status-label {font-weight:600; color:#495057; font-size:0.95rem}
.status-value {font-weight:700; padding:6px 14px; border-radius:20px; font-size:.85rem; display:inline-flex; align-items:center; gap:5px}
.status-value.verified {background:linear-gradient(135deg,#d4edda,#c3e6cb); color:#155724; box-shadow:0 2px 6px rgba(39,174,96,0.2)}
.status-value.unverified {background:linear-gradient(135deg,#f8d7da,#f5c6cb); color:#721c24; box-shadow:0 2px 6px rgba(231,76,60,0.2)}
.status-value.active {background:linear-gradient(135deg,#d4edda,#c3e6cb); color:#155724; box-shadow:0 2px 6px rgba(39,174,96,0.2)}
.status-value.inactive {background:linear-gradient(135deg,#f8d7da,#f5c6cb); color:#721c24; box-shadow:0 2px 6px rgba(231,76,60,0.2)}

/* Profile Form Styles */
.profile-form .form-group {margin-bottom:20px; position:relative}
.profile-form label {display:block; font-weight:600; color:#2c3e50; margin-bottom:8px; font-size:0.95rem; display:flex; align-items:center; gap:6px}
.profile-form .form-control {width:100%; padding:12px 16px; border:2px solid #e9ecef; border-radius:10px; font-size:1rem; transition:all 0.3s ease; background:#fff; box-sizing:border-box}
.profile-form .form-control:hover {border-color:#d1d5db}
.profile-form .form-control:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(91,154,139,0.1); background:#fff; transform:translateY(-1px)}
.profile-form .form-control:invalid {border-color:#e74c3c}
.profile-form .form-control[readonly] {background:linear-gradient(135deg,#f8f9fa,#f1f3f4); color:#6c757d; cursor:not-allowed; border-color:#dee2e6}
.profile-form .form-control[readonly]:hover {border-color:#dee2e6}
.profile-form textarea.form-control {resize:vertical; min-height:100px; line-height:1.6}
.profile-form input[type="text"]:not([readonly]):focus,
.profile-form input[type="email"]:not([readonly]):focus,
.profile-form textarea:focus {background:linear-gradient(135deg,#ffffff,#f8fffe)}
.profile-form .form-control.is-valid {border-color:#27ae60; background:linear-gradient(135deg,#ffffff,#f0fdf4)}
.profile-form .form-control.is-valid:focus {box-shadow:0 0 0 4px rgba(39,174,96,0.1)}
.profile-form .form-control.is-invalid {border-color:#e74c3c; background:linear-gradient(135deg,#ffffff,#fef2f2)}
.profile-form .form-control.is-invalid:focus {box-shadow:0 0 0 4px rgba(231,76,60,0.1)}
.form-error {color:#e74c3c; font-size:12px; margin-top:5px; display:block; font-weight:500}
.form-success {color:#27ae60; font-size:12px; margin-top:5px; display:block; font-weight:500}
.form-text {font-size:12px; color:#6c757d; margin-top:5px; font-style:italic; display:block}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.form-actions {display:flex; justify-content:space-between; gap:15px; margin-top:30px; padding-top:25px; border-top:2px solid #f1f3f4}
.form-actions .btn {flex:1; max-width:200px; padding:12px 24px; font-size:1rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px}
.form-actions .btn i {font-size:1.1rem}
.btn-secondary {background:linear-gradient(135deg,#95a5a6,#7f8c8d); border:none; color:#fff; border-radius:25px; transition:all 0.3s ease; text-decoration:none}
.btn-secondary:hover {background:linear-gradient(135deg,#7f8c8d,#6c7a7b); transform:translateY(-2px); box-shadow:0 4px 12px rgba(127,140,141,0.3); color:#fff}
.action-buttons {display:flex; gap:15px; flex-wrap:wrap}
.action-buttons .btn {padding:10px 20px; border-radius:25px; font-weight:500}
.booking-list {display:grid; gap:16px}
.booking-card {border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow:none; padding:16px; transition:box-shadow .2s, transform .15s}
.booking-card:hover {box-shadow:0 6px 18px #8585851f; transform:translateY(-1px)}
.booking-card__header {display:flex; align-items:center; justify-content:space-between; gap:12px}
.service {display:flex; gap:12px; align-items:center; min-width:0}
.service-icon {width:40px; height:40px; border-radius:10px; background:#f1f3f5; display:flex; align-items:center; justify-content:center; color:#495057; font-size:18px}
.service-text h4 {margin:0; font-size:16px; font-weight:600; color:#111827}
.service-text .sub {margin:2px 0 0; color:#6b7280; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.booking-status {display:flex; align-items:center;gap:5px}
.status-badge {display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:#6b7280; background:transparent; padding:2px 8px; border:none}
.status-dot {width:8px; height:8px; border-radius:50%; display:inline-block}
.status-text {line-height:1}
.booking-card__body {margin-top:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.details {display:flex; gap:16px; flex-wrap:wrap}
.detail {display:flex; gap:8px; align-items:center; color:#374151; font-size:13px}
.detail.incomplete {color:#b45309}
.detail i {color:#6b7280}
.note {margin-top:8px; background:#f8fafc; border:1px dashed #e5e7eb; color:#374151; padding:8px 10px; border-radius:8px; display:flex; gap:8px; font-size:13px}
.booking-card__actions {display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn {font-size:14px}
.btn-purple {background:#eef2ff; color:#3730a3; border-color:#e0e7ff}
.btn-purple:hover {background:#dfe5f6; color:#3730a3; border-color:#e0e7ff}
.btn-outline {background:#fff; color:#374151; border-color:#e5e7eb}
.btn-link {background:transparent; border:none; color:#6b7280; padding:6px}
.btn-danger {background:#fee2e2; color:#991b1b; border-color:#fecaca}
.btn-text-danger {background:transparent; border:none; color:#b91c1c; padding:6px}
.no-bookings {border:1px dashed #e5e7eb; border-radius:12px; padding:24px; text-align:center; color:#6b7280; background:#fff}
.no-bookings-icon {font-size:28px; color:#9ca3af; margin-bottom:8px}

/* Exquisite interaction elements */
.btn-exquisite {font-size:0.7rem; padding:4px 10px; border-radius:25px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:5px; height:35px}
.x-small {font-size:0.7rem}
.service-option-group {margin-bottom: 1.5rem;border-left: 3px solid #e9ecef;padding-left: 1rem;}
.service-option-group .group-title {font-size: 0.95rem;font-weight: 600;color: #495057;margin-bottom: 0.75rem;text-transform: uppercase;letter-spacing: 0.5px;}
.service-option-group .service-option {margin-bottom: 0.5rem;}
.service-option-group .free-list {display: flex;flex-wrap: wrap;gap: 0.5rem;}
/* Enhanced Calendar Modal Styles */
.calendar-open-btn { transition: all 0.3s ease; min-height: 60px; font-weight: 600; }
.calendar-open-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91, 154, 139, 0.3); }
.selected-appointment-display { animation: slideInUp 0.4s ease-out; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.calendar-modal { animation: fadeIn 0.3s ease-out; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; }
.calendar-modal-content { animation: slideIn 0.3s ease-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 16px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2); width: 92vw; max-width: 900px; height: 85vh; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
@keyframes slideIn { from { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.calendar-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); }
.calendar-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid #e5e7eb; background: linear-gradient(135deg, #f8fafc, #eef2f7); }
.calendar-modal-header h3 { margin: 0; color: #0f172a; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.2px; }
.calendar-modal-close { background: none; border: none; color: #6b7280; font-size: 1.25rem; cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s; }
.calendar-modal-close:hover { background: #f3f4f6; color: #374151; }
.calendar-modal-body { flex: 1; padding: 16px; overflow: hidden; position: relative; background: #f8fafc; display: flex; flex-direction: column; min-height: 0; }
.availability-panel { height: 100%; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.availability-header { padding: 16px 18px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.availability-title { display: flex; flex-direction: column; gap: 0; font-weight: 600; color: #0f172a; }
.availability-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;}
.availability-meta .availability-range { margin-right: 0; }
.availability-meta .availability-count { flex-shrink: 0; }
.availability-range { font-size: 0.85rem; color: #64748b; font-weight: 500; }
.availability-count { font-size: 0.8rem; color: #fff; background: #0f766e; padding: 4px 12px; border-radius: 999px; font-weight: 600; }
.availability-list { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.availability-day { display: flex; flex-direction: column; padding: 14px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 10px 18px rgba(148, 163, 184, 0.12); }
.availability-day-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.availability-day-title { font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.availability-time-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.availability-time-option { border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a; border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; }
.availability-time-option:hover { border-color: var(--primary); background: rgba(15, 118, 110, 0.1); color: var(--primary-dark); transform: translateY(-1px); }
.availability-time-option.selected { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 8px 14px rgba(15, 118, 110, 0.22); }
.availability-time-option.current-booking { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.availability-time-option.current-booking:hover { background: #fef3c7; border-color: #d1920d; }
.current-booking-indicator { font-size: 0.85em; color: #b45309; font-weight: 600; background: #fef3c7; padding: 2px 8px; border-radius: 4px; }
.btn-disabled-gray { background: #64748b !important; border-color: #64748b !important; opacity: 0.6; cursor: not-allowed !important; pointer-events: all !important; }
.availability-day-empty { font-size: 0.82rem; color: #94a3b8; padding: 6px 2px; }
.availability-badge { font-size: 0.72rem; font-weight: 600; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 3px 8px; }
.availability-empty { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px 24px; color: #94a3b8; text-align: center; flex-direction: column; }
.availability-empty i { font-size: 2rem; color: #cbd5f5; }
.availability-empty-text p { margin: 0; font-weight: 600; color: #64748b; }
.availability-empty-text span { font-size: 0.85rem; color: #94a3b8; }
.calendar-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #6b7280; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid #f3f4f6; border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px; }
.booking-list-wrapper {position:relative;}
.infinite-load-state {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 8px 18px; color:#6c757d; font-size:.9rem;}
.infinite-load-spinner {display:flex; align-items:center; gap:8px; color:var(--primary);}
.infinite-load-sentinel {width:100%; height:1px;}
.infinite-load-end {color:#adb5bd; font-size:.85rem;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.calendar-modal-footer { padding: 20px 24px; border-top: 1px solid #e5e7eb; background: #f9fafb; display: flex; justify-content: space-between; align-items: center; }
.selected-slot-info { display: flex; align-items: center; color: #059669; font-weight: 500; font-size: 14px}
.slot-details { display: flex; align-items: center; gap: 8px; }
.tomorrow-indicator { font-size: 0.85em; color: #64748b; font-weight: 600; }
.modal-actions { display: flex; gap: 12px; }
.cost-detail-trigger { cursor: pointer; color: var(--primary); font-weight: 500; transition: color 0.2s ease; }
.cost-detail-trigger:hover { color: var(--primary-dark); }
.cost-detail-trigger i { font-size: 0.8em; }
.cost-details-content { display: flex; flex-direction: column; gap: 15px; }
/*.view-images-link { color: var(--primary); font-weight: 500; transition: color 0.2s ease; font-size: 13px; }*/
/*.view-images-link:hover { color: var(--primary-dark); }*/
.service-cost-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f3f5; }
.service-name { font-weight: 600; color: #495057; }
.service-pricing { display: flex; gap: 12px; align-items: center; }
.original-price { text-decoration: line-through; color: #868e96; font-size: 0.9em; }
.discounted-price { color: #fa5252; font-weight: 600; background-color: #fff5f5; padding: 3px 8px; border-radius: 12px; }
.price { font-weight: 600; color: #495057; }
.total-cost { font-size: 1.2em; font-weight: 700; text-align: right; margin-top: 10px; color: #2b8a3e; }
.health-section { background: #fff; border-radius: 12px; border: 1px solid #e9ecef; margin-bottom: 20px; overflow: hidden; transition: all 0.3s ease; }
.health-section:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.health-section .section-header { display: flex; align-items: center; padding: 20px 24px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 1px solid #e9ecef; }
.health-section .section-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 16px; font-size: 1.5rem; flex-shrink: 0; }
.vaccination-section .section-icon { background: linear-gradient(135deg, #28a745, #20c997); color: #fff; }
.other-options-section .section-icon { background: linear-gradient(135deg, #ffc107, #fd7e14); color: #fff; }
.health-section .section-content { flex: 1; }
.health-section .section-title { margin: 0 0 4px 0; font-size: 1.25rem; font-weight: 600; color: #2c3e50; line-height: 1.3; }
.health-section .section-description { margin: 0; font-size: 0.9rem; color: #6c757d; line-height: 1.4; }
.vaccination-content { padding: 24px; }
.vaccination-main { margin-bottom: 20px; }
.vaccination-checkbox { display: flex; align-items: center; gap: 12px; }
.vaccination-label { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0; }
.vaccination-details { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-top: 16px; border: 1px solid #e9ecef; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.vaccination-date { background: #fff; border: 2px solid #e9ecef; border-radius: 8px; padding: 12px 16px; font-size: 1rem; transition: all 0.3s ease; }
.vaccination-date:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 154, 139, 0.1); }
.file-input { background: #fff; border: 2px dashed #28a745; border-radius: 8px; padding: 16px; font-size: 1rem; transition: all 0.3s ease; cursor: pointer; }
.file-input:hover { border-color: #20c997; background: #f8fff9; }
.file-hint { font-size: 0.85rem; color: #6c757d; margin-top: 8px; font-style: italic; }
.other-options-content { padding: 24px; }
.other-options-content label { display: flex; align-items: center; gap: 5px; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.option-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 20px; transition: all 0.3s ease; }
.option-item:hover { background: #fff; border-color: #ffc107; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15); }
.behavior-checkbox { display: flex; align-items: flex-start; gap: 12px; }
.behavior-label { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 500; color: #2c3e50; cursor: pointer; margin: 0; line-height: 1.4; }
.behavior-label i { font-size: 1.2rem; color: #ffc107; flex-shrink: 0; }
.label-text { flex: 1; }
.health-section .form-checkbox { width: 20px; height: 20px; border: 2px solid #dee2e6; border-radius: 4px; background: #fff; cursor: pointer; transition: all 0.3s ease; position: relative; flex-shrink: 0; }
.health-section .form-checkbox:checked { background: #28a745; border-color: #28a745; }
.health-section .form-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 700; }
.other-options-section .form-checkbox:checked { background: #ffc107; border-color: #ffc107; }
.appointment-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.appointment-details { display: flex; align-items: center; gap: 12px; flex: 1; }
.appointment-details i { font-size: 1.5rem; }
.details-text { color: #155724; text-align: left; }
.selected-appointment-display { background: linear-gradient(135deg, #d4edda, #c3e6cb); border: 1px solid #c3e6cb; border-radius: 12px; padding: 20px; margin-top: 10px; animation: fadeIn 0.3s ease; }
.calendar-selection-area { text-align: center; }
#costDetailsModal .modal-content { border-radius: 10px; border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
#costDetailsModal .modal-header { background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; border-radius: 10px 10px 0 0; padding: 1rem 1.5rem; }
#costDetailsModal .modal-title { font-weight: 600; color: #495057; }
#costDetailsModal .modal-body { padding: 1.2rem; }
#costDetailsModal .modal-footer { background-color: #f8f9fa; border-top: 1px solid #e9ecef; border-radius: 0 0 10px 10px; padding: 1rem 1.5rem; }
.letter-spacing-1 { letter-spacing: 0.05rem; }
.modern-cost-details { display: flex; flex-direction: column; gap: 14px; }
.cost-services-wrap { background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%); border: 1px solid #edf1f7; border-radius: 14px; padding: 12px; }
.cost-section-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.cost-section-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06rem; text-transform: uppercase; color: #5c6f82; }
.cost-section-subtitle { font-size: 0.74rem; color: #8a97a5; }
.service-cost-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #ffffff; border: 1px solid #eef2f6; }
.service-cost-item + .service-cost-item { margin-top: 8px; }
.service-name-wrap { display: flex; align-items: center; min-width: 0; }
.service-name { font-weight: 600; color: #2f3a45; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.service-original-price { color: #9aa6b2; text-decoration: line-through; font-size: 0.85rem; }
.service-final-price { font-weight: 700; color: #1f2d3d; font-size: 1rem; }
.service-saving-tag { color: #667788; font-size: 0.76rem; }
/*.cost-total-wrap { background: #ffffff; border: 1px solid #edf1f7; border-radius: 14px; padding: 12px; }*/
.discount-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: #effaf3; }
.discount-label { color: #198754; font-weight: 600; font-size: 0.86rem; }
.discount-value { color: #198754; font-weight: 700; }
.total-amount-card { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%); border-radius: 12px; border: 1px solid #dceaff; }
.total-amount-text { display: flex; flex-direction: column; }
.total-title { font-size: 0.95rem; font-weight: 700; color: #2e3e4f; }
.total-hint { font-size: 0.75rem; color: #7d8b99; }
.total-value { font-size: 1.7rem; font-weight: 800; line-height: 1; color: #0d6efd; }
.total-amount-main { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tip-amount-secondary { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; color: #8694a3; background: rgba(255, 255, 255, 0.75); border: 1px solid #e6edf5; border-radius: 999px; padding: 2px 8px; line-height: 1.2; }
.tip-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #94a1ad; }
.tip-label i { font-size: 0.58rem; color: #b1bcc8; }
.tip-value { font-weight: 700; color: #5f6f82; }
.coupon-section { background: #fcfdff; padding: 14px; border-radius: 14px; border: 1px solid #edf1f7; }
.section-title { color: #5c6f82; font-size: 0.78rem; }
.coupon-subtitle { color: #8a97a5; font-size: 0.73rem; margin-top: 2px; }
.coupon-card { display: flex; align-items: center; padding: 11px 12px; border: 1px solid #e7edf4; border-radius: 11px; transition: all 0.2s ease; background: #fff; position: relative; overflow: hidden; cursor: pointer; }
.coupon-card.selectable:hover { border-color: #0d6efd; background: #f8fbff; transform: translateY(-1px); cursor: pointer; box-shadow: 0 6px 16px rgba(13, 110, 253, 0.12); }
.coupon-card.selected { border: 1px solid #0d6efd; background: #f4f9ff; box-shadow: 0 6px 14px rgba(13, 110, 253, 0.14); }
.coupon-icon-wrapper { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #f2f5f9; border-radius: 9px; color: #94a1ae; margin-right: 12px; font-size: 1rem; flex-shrink: 0; }
.selected .coupon-icon-wrapper { background: #0d6efd; color: #fff; }
.coupon-details { flex: 1; min-width: 0; }
.coupon-code { font-weight: 700; color: #2f3a45; font-size: 0.86rem; }
.coupon-discount { font-weight: 800; color: #0d6efd; font-size: 0.82rem; }
.coupon-desc { font-size: 0.75rem; color: #7f8c98; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.animate-fade-in { animation: bookingCostFadeIn 0.3s ease-out; }
@keyframes bookingCostFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.booking-summary-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); overflow: hidden; }
.booking-summary-card .summary-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #f8fafc 0%, #f2f4f7 100%); border-bottom: 1px solid #eef0f2; }
.booking-summary-card .summary-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #0f172a; }
.booking-summary-card .summary-title i { color: #ff7a00; font-size: 18px; }
.booking-summary-card .pet-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; white-space: nowrap; }
.booking-summary-card .summary-body { padding: 14px 16px; }
.booking-summary-card .summary-row { display: grid; grid-template-columns: 120px 1fr; align-items: start; gap: 12px; padding: 10px 0; }
.booking-summary-card .summary-row + .summary-row { border-top: 1px dashed #eef0f2; }
.booking-summary-card .summary-label { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.booking-summary-card .summary-value { color: #0f172a; font-weight: 600; }
.bookings-container { display: flex; gap: 20px; margin-top: 20px; }
.bookings-sidebar { flex: 0 0 250px; }
.bookings-main { flex: 1; min-width: 0; }
.nav-pills .nav-link { color: #6c757d; background-color: #f8f9fa; margin-bottom: 10px; text-align: left; padding: 15px 20px; border-radius: 12px; font-weight: 500; display: flex; align-items: center; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border: 1px solid transparent; }
.nav-pills .nav-link:hover { background-color: #e2e6ea; color: #343a40; border-color: #d7dde3; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:active { background-color: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(91, 154, 139, 0.3); }
.nav-pills .nav-link .badge { font-weight: 500; }
.nav-pills .nav-link.active .badge { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.booking-card-new { display: flex; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 20px; overflow: hidden; border: 1px solid #dedede; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.booking-card-new:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.booking-date-section { flex: 0 0 100px; background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; border-right: 1px solid #f0f0f0; text-align: center; }
.booking-date-section.incomplete { background: #fff5f5; color: #dc3545; }
.booking-month { font-size: 14px; text-transform: uppercase; font-weight: 600; color: #6c757d; letter-spacing: 1px; }
.booking-day { font-size: 32px; font-weight: 700; color: #212529; line-height: 1; margin: 5px 0; }
.booking-time { font-size: 13px; color: #6c757d; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.booking-no-date { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #dc3545; font-weight: 500; }
.booking-no-date i { font-size: 24px; }
.booking-content-section { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.booking-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.booking-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 5px; }
.booking-cost { cursor: pointer; padding: 8px 10px; border-radius: 10px; transition: background-color 0.2s; background-color: #f8f9fa; border: 1px solid #eef2f5; min-width: 130px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.booking-cost:hover { background-color: #ededed; }
.cost-main { display: flex; flex-direction: column; min-width: 0; }
.cost-label { display: block; font-size: 11px; color: #98a2ad; text-transform: uppercase; letter-spacing: 0.04em; }
.cost-prices { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; }
.cost-value { display: block; font-size: 18px; font-weight: 800; color: #198754; line-height: 1.1; }
.cost-value-original { display: block; font-size: 12px; font-weight: 600; color: #9aa6b2; text-decoration: line-through; line-height: 1.1; }
.cost-value-discounted { display: block; font-size: 19px; font-weight: 800; color: #0d6efd; line-height: 1.1; }
.cost-value-side { text-align: right; }
.cost-discount-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #0d6efd; background: #eaf2ff; }
.cost-coupon-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.booking-actions-new { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; align-items: center; }
.btn-request-cancel { background-color: #ff9800; color: white; border: none; }
.btn-request-cancel:hover { background-color: #f57c00; color: white; }
/*pet picture*/
.pet-pictures .pet-pictures { max-width: 1400px; margin: 0 auto; padding: 24px; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); }
.pet-pictures .page-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 24px; padding: 36px 40px; margin-bottom: 32px; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2); position: relative; overflow: hidden; }
.pet-pictures .page-header::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius: 50%; transform: translate(30%, -30%); }
.pet-pictures .header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; position: relative; z-index: 1; }
.pet-pictures .pet-info { display: flex; align-items: center; gap: 24px; }
.pet-pictures .pet-avatar-mini { width: 80px; height: 80px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); border: 3px solid rgba(255, 255, 255, 0.3); transition: transform 0.3s ease; }
.pet-pictures .pet-avatar-mini:hover { transform: scale(1.05) rotate(2deg); }
.pet-pictures .pet-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.pet-pictures .pet-name { font-size: 36px; font-weight: 800; color: white; margin: 0; letter-spacing: -0.5px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); }
.pet-pictures .pet-subtitle { font-size: 15px; color: rgba(255, 255, 255, 0.85); margin: 4px 0 0 0; font-weight: 500; }
.pet-pictures .btn-back { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px; color: white; text-decoration: none; font-weight: 600; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.pet-pictures .btn-back:hover { background: rgba(255, 255, 255, 0.3); transform: translateX(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: white; }
.pet-pictures .content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pet-pictures .photo-card { border-radius: 20px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0,0,0,0.04); height: 100%; display: flex; flex-direction: column; transition: all 0.3s ease; }
.pet-pictures .photo-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.pet-pictures .card-header-modern { display: flex; align-items: center; gap: 16px; padding: 28px 32px 20px; background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%); border-bottom: 1px solid #f0f1f3; }
.pet-pictures .header-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; transition: transform 0.3s ease; }
.pet-pictures .photo-card:hover .header-icon { transform: scale(1.1) rotate(5deg); }
.pet-pictures .grooming-icon { background: linear-gradient(135deg, #FF6B9D 0%, #FEC163 100%); box-shadow: 0 6px 20px rgba(255, 107, 157, 0.35); }
.pet-pictures .bath-icon { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); box-shadow: 0 6px 20px rgba(79, 172, 254, 0.35); }
.pet-pictures .card-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0; letter-spacing: -0.3px; }
.pet-pictures .card-subtitle { font-size: 13px; color: #8b95a5; margin: 3px 0 0 0; font-weight: 500; }
.pet-pictures .card-body-modern { padding: 32px; flex: 1; background: white; }
.pet-pictures .avatar-card { grid-column: span 1; }
.pet-pictures .avatar-preview-wrapper { position: relative; width: 160px; margin: 0 auto 36px; }
.pet-pictures .avatar-preview { position: relative; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 5px solid #f8f9fa; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; }
.pet-pictures .avatar-preview:hover { transform: scale(1.05); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); }
.pet-pictures .avatar-preview.has-preview { border-color: #667eea; box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3); }
.pet-pictures .avatar-image { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; }
.pet-pictures .avatar-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.pet-pictures .avatar-preview:hover .avatar-overlay { opacity: 1; }
.pet-pictures .avatar-overlay i { font-size: 42px; color: white; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.pet-pictures .avatar-preview-badge { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); animation: slideUp 0.3s ease; white-space: nowrap; }
@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.pet-pictures .avatar-preview-badge i { font-size: 14px; }
.pet-pictures .upload-form { display: flex; flex-direction: column; gap: 12px; }
.pet-pictures .file-input { display: none; }
.pet-pictures .file-input-wrapper { position: relative; }
.pet-pictures .file-label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px dashed #ced4da; border-radius: 14px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; color: #495057; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-pictures .file-label:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: #667eea; color: #667eea; transform: translateY(-1px); }
.pet-pictures .file-label.has-file { background: linear-gradient(135deg, #e7f3ff 0%, #d4e9ff 100%); border-color: #667eea; border-style: solid; color: #667eea; }
.pet-pictures .file-label i { font-size: 18px; flex-shrink: 0; }
.pet-pictures .file-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-pictures .avatar-actions { display: flex; gap: 10px; }
.pet-pictures .btn-upload { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 14px; color: white; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); }
.pet-pictures .btn-upload:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4); }
.pet-pictures .btn-upload:active { transform: translateY(0); }
.pet-pictures .btn-upload:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pet-pictures .btn-reset { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 14px; color: #495057; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.3s ease; }
.pet-pictures .btn-reset:hover { background: #e9ecef; border-color: #adb5bd; transform: translateY(-2px); }
.pet-pictures .btn-reset:active { transform: translateY(0); }
.pet-pictures .invalid-feedback { color: #dc3545; font-size: 12px; margin-top: 4px; }
.pet-pictures .user-photos-card { grid-column: span 2; }
.pet-pictures .upload-zone { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px dashed #ced4da; border-radius: 18px; padding: 36px; margin-bottom: 28px; cursor: pointer; transition: all 0.3s ease; text-align: center; position: relative; overflow: hidden; }
.pet-pictures .upload-zone::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(102, 126, 234, 0.1); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; }
.pet-pictures .upload-zone:hover::before { width: 400px; height: 400px; }
.pet-pictures .upload-zone:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-color: #667eea; transform: translateY(-2px); }
.pet-pictures .upload-zone-content { position: relative; z-index: 1; }
.pet-pictures .upload-icon { font-size: 48px; color: #667eea; margin-bottom: 12px; transition: transform 0.3s ease; }
.pet-pictures .upload-zone:hover .upload-icon { transform: translateY(-4px); }
.pet-pictures .upload-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 0 0 6px 0; }
.pet-pictures .upload-hint { font-size: 13px; color: #8b95a5; margin: 0; }
.pet-pictures .photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; transition: opacity 0.3s ease; }
.pet-pictures .photos-grid.loading { opacity: 0.5; pointer-events: none; }
.pet-pictures .photo-item { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease; background: #f8f9fa; }
.pet-pictures .photo-item:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transform: translateY(-4px); }
.pet-pictures .photo-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pet-pictures .photo-item:hover .photo-image { transform: scale(1.1); }
.pet-pictures .photo-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.pet-pictures .photo-item:hover .photo-overlay { opacity: 1; }
.pet-pictures .photo-overlay i { font-size: 36px; color: white; }
.pet-pictures .delete-btn { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); border: none; color: #dc3545; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.pet-pictures .photo-item:hover .delete-btn { opacity: 1; }
.pet-pictures .delete-btn:hover { background: #dc3545; color: white; transform: scale(1.15) rotate(90deg); }
.pet-pictures .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #adb5bd; }
.pet-pictures .empty-state i { font-size: 56px; margin-bottom: 16px; display: block; opacity: 0.5; }
.pet-pictures .empty-state p { font-size: 15px; margin: 0; color: #8b95a5; }
.pet-pictures #photosGridContainer { position: relative; }
.pet-pictures .grooming-header { background: linear-gradient(135deg, #FFE5E5 0%, #FFF0F5 100%); border-bottom: 1px solid #FFD6E0; }
.pet-pictures .grooming-card .card-title { background: linear-gradient(135deg, #FF6B9D 0%, #FEC163 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pet-pictures .bath-header { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); border-bottom: 1px solid #BBDEFB; }
.pet-pictures .bath-card .card-title { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pet-pictures .service-sessions-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; }
.pet-pictures .service-session-card { background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%); border: 1px solid #e8eaed; border-radius: 16px; padding: 24px; transition: all 0.3s ease; position: relative; overflow: hidden; flex: 1 1 420px; min-width: 320px; }
.pet-pictures .service-session-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #FF6B9D 0%, #FEC163 100%); opacity: 0; transition: opacity 0.3s ease; }
.pet-pictures .bath-card .service-session-card::before { background: linear-gradient(90deg, #4FACFE 0%, #00F2FE 100%); }
.pet-pictures .service-session-card:hover::before { opacity: 1; }
.pet-pictures .service-session-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-4px); border-color: #d0d4d9; }
.pet-pictures .session-header-simple { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f1f3f5; }
.pet-pictures .session-info { display: flex; flex-direction: row; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.pet-pictures .session-title { font-size: 17px; font-weight: 700; color: #1a1a2e; margin: 0; letter-spacing: -0.2px; }
.pet-pictures .session-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6c757d; font-weight: 600; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 6px 12px; border-radius: 8px; width: fit-content; border: 1px solid #e9ecef; }
.pet-pictures .session-date i { font-size: 13px; }
.pet-pictures .comparison-showcase { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
.pet-pictures .comparison-pair { display: flex; align-items: center; gap: 15px; padding: 12px; background: #ffffff; border: 1px solid #f0f1f3; border-radius: 16px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.03); flex: 0 1 auto; max-width: 100%; }
.pet-pictures .comparison-pair:hover { background: #f5f6f8; }
.pet-pictures .photo-wrapper { flex: 0 1 auto; position: relative; }
.pet-pictures .photo-box { position: relative; aspect-ratio: 15/10; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: all 0.4s ease; width: 260px; max-width: 100%;}
.pet-pictures .photo-box:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.15); transform: translateY(-3px); }
.pet-pictures .photo-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pet-pictures .photo-box:hover img { transform: scale(1.08); }
.pet-pictures .photo-tag { position: absolute; top: 10px; left: 10px; padding: 3px 7px; border-radius: 6px; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; color: white; backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,0.15); transition: all 0.3s ease; }
.pet-pictures .photo-box:hover .photo-tag { transform: scale(1.05); }
.pet-pictures .before-tag { background: linear-gradient(135deg, rgba(52, 58, 64, 0.9) 0%, rgba(73, 80, 87, 0.9) 100%); }
.pet-pictures .after-tag { background: linear-gradient(135deg, rgba(255, 107, 157, 0.95) 0%, rgba(254, 193, 99, 0.95) 100%); }
.pet-pictures .bath-card .after-tag { background: linear-gradient(135deg, rgba(79, 172, 254, 0.95) 0%, rgba(0, 242, 254, 0.95) 100%); }
.pet-pictures .transformation-arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; min-width: 22px; transition: all 0.3s ease; }
.pet-pictures .transformation-arrow i { color: #d0d4d9; transition: all 0.3s ease; }
.pet-pictures .comparison-pair:hover .transformation-arrow i { color: #667eea; transform: translateX(4px); }
.pet-pictures .empty-box { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px dashed #ced4da; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #adb5bd; gap: 8px; cursor: default; }
.pet-pictures .empty-box i { font-size: 28px; opacity: 0.6; }
.pet-pictures .empty-box span { font-size: 12px; font-weight: 600; }
.pet-pictures .empty-state-modern { text-align: center; padding: 80px 40px; color: #868e96; }
.pet-pictures .empty-icon-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 40px; transition: all 0.3s ease; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pet-pictures .grooming-bg { background: linear-gradient(135deg, #FFE5E5 0%, #FFF0F5 100%); color: #FF6B9D; box-shadow: 0 8px 24px rgba(255, 107, 157, 0.2); }
.pet-pictures .bath-bg { background: linear-gradient(135deg, #E3F2FD 0%, #F0F8FF 100%); color: #4FACFE; box-shadow: 0 8px 24px rgba(79, 172, 254, 0.2); }
.pet-pictures .empty-state-modern h4 { font-size: 20px; font-weight: 700; color: #2c3e50; margin: 0 0 8px 0; letter-spacing: -0.3px; }
.pet-pictures .empty-state-modern p { font-size: 14px; color: #8b95a5; margin: 0; }

.user-booking-confirm .confirmation-header {text-align: center;padding: 1.5rem 1rem 0;position: relative;}
.user-booking-confirm .success-icon-wrapper {margin-bottom: 0.5rem;}
.user-booking-confirm .celebrate-animation {position: absolute;width: 300px;bottom: -30px;right: 0;pointer-events: none;overflow: hidden;left: 50%;transform: translateX(-50%);}
.user-booking-confirm .confirmation-title {font-size: 1.5rem;font-weight: 600;color: #1a1a2e;margin-bottom: 0.25rem;}
.user-booking-confirm .confirmation-subtitle {color: #6c757d;font-size: 0.95rem;margin: 0;}
.user-booking-confirm .confirmation-card {background: #fff;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.08);overflow: hidden;margin-bottom: 1.5rem;}
.user-booking-confirm .datetime-hero {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding: 1.5rem;display: flex;align-items: center;gap: 1rem;color: white;}
.user-booking-confirm .date-badge {background: rgba(255,255,255,0.2);border-radius: 12px;padding: 0.75rem 1rem;text-align: center;min-width: 65px;}
.user-booking-confirm .date-month {display: block;font-size: 0.75rem;text-transform: uppercase;letter-spacing: 1px;opacity: 0.9;}
.user-booking-confirm .date-day {display: block;font-size: 1.75rem;font-weight: 700;line-height: 1.1;}
.user-booking-confirm .datetime-details {flex: 1;}
.user-booking-confirm .datetime-primary {font-size: 1.1rem;font-weight: 600;margin-bottom: 0.25rem;}
.user-booking-confirm .datetime-time {display: flex;align-items: center;gap: 0.5rem;font-size: 1rem;opacity: 0.95;}
.user-booking-confirm .datetime-time i {font-size: 0.9rem;}
.user-booking-confirm .booking-details-grid {padding: 1rem;display: grid;gap: 0.75rem;}
.user-booking-confirm .detail-item {display: flex;align-items: flex-start;gap: 0.75rem;padding: 0.75rem;background: #f8f9fa;border-radius: 10px;}
.user-booking-confirm .detail-icon {width: 36px;height: 36px;background: white;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.user-booking-confirm .detail-icon i {font-size: 1rem;color: #667eea;}
.user-booking-confirm .detail-content {flex: 1;min-width: 0;}
.user-booking-confirm .detail-label {display: block;font-size: 0.75rem;color: #6c757d;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 0.15rem;}
.user-booking-confirm .detail-value {display: block;font-size: 0.95rem;font-weight: 500;color: #1a1a2e;}
.user-booking-confirm .detail-sub {font-weight: 400;color: #6c757d;font-size: 0.85rem;}
.user-booking-confirm .detail-address {font-size: 0.9rem;line-height: 1.4;}
.user-booking-confirm .pickup-notice {display: flex;align-items: flex-start;gap: 0.75rem;padding: 1rem;background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);border-radius: 10px;border-left: 4px solid #ffc107;}
.user-booking-confirm .pickup-notice-icon {width: 40px;height: 40px;background: #ffc107;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.user-booking-confirm .pickup-notice-icon i {font-size: 1.1rem;color: #fff;}
.user-booking-confirm .pickup-notice-content {flex: 1;}
.user-booking-confirm .pickup-notice-title {display: block;font-size: 0.85rem;font-weight: 600;color: #856404;margin-bottom: 0.25rem;}
.user-booking-confirm .pickup-notice-text {display: block;font-size: 0.85rem;color: #664d03;line-height: 1.5;}
.user-booking-confirm .pickup-notice-text strong {color: #856404;font-weight: 600;}
.user-booking-confirm .detail-price .detail-icon i {color: #28a745;}
.user-booking-confirm .price-value {font-size: 1.1rem;font-weight: 600;color: #28a745;}
.user-booking-confirm .services-section {border-top: 1px solid #e9ecef;margin: 0 1rem;padding: 1rem 0;}
.user-booking-confirm .services-label {display: flex;align-items: center;gap: 0.5rem;font-size: 0.8rem;color: #6c757d;margin-bottom: 0.5rem;}
.user-booking-confirm .services-chevron {margin-left: auto;cursor: pointer;transition: transform 0.2s ease;}
.user-booking-confirm .services-chevron:hover {color: #667eea;}
.user-booking-confirm .services-chevron.rotated {transform: rotate(180deg);}
.user-booking-confirm .services-list {padding-left: 1.25rem;}
.user-booking-confirm .service-item {display: flex;align-items: center;gap: 0.5rem;padding: 0.4rem 0;font-size: 0.85rem;color: #495057;}
.user-booking-confirm .service-item i {color: #28a745;font-size: 0.8rem;}
.user-booking-confirm .notes-section {border-top: 1px solid #e9ecef;margin: 0 1rem;padding: 1rem 0;}
.user-booking-confirm .notes-label {display: flex;align-items: center;gap: 0.5rem;font-size: 0.8rem;color: #6c757d;margin-bottom: 0.5rem;}
.user-booking-confirm .notes-content {font-size: 0.9rem;color: #495057;font-style: italic;line-height: 1.5;padding-left: 1.25rem;}
.user-booking-confirm .confirmation-actions {display: flex;flex-direction: column;gap: 0.75rem;}
.user-booking-confirm .confirmation-actions .btn-modern {justify-content: center;}

/* Service Agreement Section */
.agreement-icon {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.agreement-box {background:#f8f9fa; border-radius:12px; overflow:hidden; border:1px solid #e9ecef}
.agreement-scroll-container {max-height:300px; overflow-y:auto; padding:25px; background:#fff; border-bottom:1px solid #e9ecef}
.agreement-scroll-container::-webkit-scrollbar {width:6px}
.agreement-scroll-container::-webkit-scrollbar-track {background:#f1f1f1; border-radius:3px}
.agreement-scroll-container::-webkit-scrollbar-thumb {background:#c1c1c1; border-radius:3px}
.agreement-scroll-container::-webkit-scrollbar-thumb:hover {background:#a1a1a1}
.agreement-content h4 {font-size:1.2rem; font-weight:600; color:#333; margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid #667eea}
.agreement-intro-text {color:#666; line-height:1.7; margin-bottom:20px; font-size:.95rem}
.agreement-item {margin-bottom:20px}
.agreement-item h5 {font-size:1rem; font-weight:600; color:#444; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.agreement-item h5 i {color:#667eea; font-size:1.1rem}
.agreement-item p {color:#666; font-size:.9rem; line-height:1.6; margin-bottom:8px}
.agreement-item ul {margin:10px 0 0 0; padding-left:20px}
.agreement-item ul li {color:#666; font-size:.85rem; line-height:1.6; margin-bottom:6px}
.agreement-item ul li strong {color:#444}
.agreement-full-link {margin-top:20px; padding-top:15px; border-top:1px dashed #ddd}
.agreement-full-link a {color:#667eea; text-decoration:none; font-weight:500; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; transition:all .2s ease}
.agreement-full-link a:hover {color:#764ba2; text-decoration:underline}
.agreement-checkbox-wrapper {padding:20px 25px; background:#f8f9fa}
.agreement-checkbox-label {display:flex; align-items:flex-start; gap:12px; cursor:pointer; user-select:none}
.agreement-checkbox-label input[type="checkbox"] {position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.checkbox-custom {width:22px; height:22px; border:2px solid #ccc; border-radius:5px; flex-shrink:0; position:relative; transition:all .2s ease; margin-top:2px}
.agreement-checkbox-label input[type="checkbox"]:checked + .checkbox-custom {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); border-color:#667eea}
.agreement-checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {content:''; position:absolute; left:6px; top:2px; width:6px; height:12px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.checkbox-text {color:#555; font-size:.95rem; line-height:1.5}
.checkbox-text a {color:#667eea; text-decoration:none; font-weight:500}
.checkbox-text a:hover {text-decoration:underline}
.agreement-error-message {margin-top:12px; padding:10px 15px; background:#fff5f5; border:1px solid #feb2b2; border-radius:8px; color:#c53030; font-size:.9rem; display:flex; align-items:center; gap:8px}
.agreement-error-message i {font-size:1rem}
.agreement-box-compact {background:#fff; border:1px solid #e2e8f0}
.agreement-checkbox-wrapper-compact {padding:20px 25px; background:#fff; border-radius:12px}
.agreement-checkbox-wrapper-compact .checkbox-text {color:#166534}

@media (max-width:480px){
  .account-status {padding:15px; border-radius:10px}
  .account-status h4 {font-size:1.1rem}
  .book-header .book-title {font-size:1.4rem}
  .empty-state-icon {width:100px; height:100px}
  .pet-behavior-grid {grid-template-columns:1fr; gap:12px}
  .pet-form-actions {flex-direction:column; padding:20px}
  .pet-form-actions .pet-form-btn {max-width:100%}
  .pet-form-page {padding:0 5px}
  .pet-form-page-header {padding:30px 15px; margin-bottom:20px}
  .pet-form-page-subtitle {font-size:1rem}
  .pet-form-page-title {font-size:1.8rem}
  .pet-form-row {grid-template-columns:1fr; gap:15px}
  .pet-form-section-body {padding:15px}
  .pet-form-section-header {padding:20px}
  .pet-radio-item {min-width:100%}
  .pet-size-group {grid-template-columns:1fr; gap:10px}
  .section-header-icon {width:45px; height:45px; font-size:1.3rem}
  .section-header-title {font-size:1.1rem}
  .empty-state-icon i {font-size:3rem}
  .empty-state-title {font-size:1.5rem}
  .empty-state-text {font-size:1rem}
  .pet-avatar-modern {width:100px; height:100px; border-width:4px}
  .pet-card-body {padding:20px}
  .pet-card-header {height:180px}
  .pet-footer-btn {padding:12px; font-size:0.85rem}
  .pet-info-item {font-size:0.85rem; padding:5px 10px}
  .pet-name-modern {font-size:1.3rem}
  .pet-note-modern {padding:10px 12px}
  .pets-empty-state {padding:50px 20px}
  .pets-grid-modern {gap:15px}
  .pets-page-header {padding:20px 15px; margin-bottom:20px}
  .pets-page-title {font-size:1.6rem}
  .pets-page-title i {font-size:1.6rem}
  .booking-form-container .base-service-selection .service-option-label{padding:12px 15px 12px 40px}
  .booking-form-container .current-price{font-size:.75rem; padding:1px 6px}
  .booking-form-container .feature-name{font-size:.8rem}
  .booking-form-container .service-features-grid{grid-template-columns:1fr 1fr; gap:8px; padding:0}
  .booking-form-container .service-radio,
  .booking-form-container .service-checkbox{left:15px; width:16px; height:16px}
  .health-section .form-checkbox { width: 18px; height: 18px; }
  .health-section .form-checkbox:checked::after { font-size: 10px; }
  .health-section .section-header { padding: 12px 16px; }
  .option-item { padding: 14px; }
  .other-options-content { padding: 16px; }
  .profile-card {padding:20px 15px; border-radius:10px}
  .profile-card h3 {font-size:1.2rem; flex-direction:column; gap:5px}
  .profile-form .form-control {padding:10px 14px; font-size:0.95rem}
  .profile-form label {font-size:0.9rem}
  .profile-tip-card {padding:15px; border-radius:10px}
  .profile-tip-card h5 {font-size:0.95rem}
  .profile-tip-card .tip-list li {font-size:0.8rem}
  .section-header {flex-direction:column; text-align:center; gap:10px}
  .section-icon {margin-right:0}
  .availability-list { padding: 14px; gap: 12px; }
  .availability-day { padding: 12px; }
  .availability-time-grid { gap: 8px; }
  .availability-time-option { padding: 7px 12px; font-size: 0.82rem; }
  .status-item {padding:12px}
  .time-slots-grid {grid-template-columns:1fr 1fr}
  .user-content {padding:15px 10px}
  .vaccination-content, .other-options-content { padding: 16px; }
  .vaccination-details { padding: 16px; }
  .pet-pictures .pet-pictures { padding: 12px; }
  .pet-pictures .page-header { padding: 20px; }
  .pet-pictures .pet-info { gap: 16px; }
  .pet-pictures .pet-name { font-size: 24px; }
  .pet-pictures .pet-subtitle { font-size: 13px; }
  .pet-pictures .btn-back { padding: 10px 18px; font-size: 14px; }
  .pet-pictures .card-header-modern { padding: 18px 20px; }
  .pet-pictures .header-icon { width: 44px; height: 44px; font-size: 20px; }
  .pet-pictures .card-title { font-size: 17px; }
  .pet-pictures .card-body-modern { padding: 20px; }
  .pet-pictures .photos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pet-pictures .comparison-pair { flex-direction: column; gap: 14px; }
  .pet-pictures .transformation-arrow { transform: rotate(90deg); font-size: 22px; }
  .pet-pictures .comparison-pair:hover .transformation-arrow i { transform: translateY(4px); }
  .pet-pictures .session-title { font-size: 16px; }
  .pet-pictures .upload-zone { padding: 24px 16px; }
  .pet-pictures .upload-icon { font-size: 40px; }
  .pet-pictures .upload-title { font-size: 16px; }
  .pet-pictures .comparison-showcase {justify-content: center}
  .user-booking-confirm .confirmation-actions {flex-direction: row;}
  .user-booking-confirm .confirmation-actions .btn-modern {flex: 1;}
}
@media (max-width: 520px) {
  .booking-summary-card .summary-row { grid-template-columns: 1fr; }
  .booking-summary-card .summary-label { margin-bottom: 2px; }
}
@media (max-width:576px) {
  .booking-actions-new { width: 100%; }
  .booking-actions-new .btn { flex: 1; }
  .booking-actions-new .btn-pay-online { flex: 0 0 100%; width: 100%; }
  .booking-card-new { flex-direction: column; }
  .booking-cost { padding: 8px 10px; margin-top: 6px; width: 100%; max-width: 100%; }
  .booking-date-section { flex-direction: row; border-right: none; border-bottom: 1px solid #f0f0f0; padding: 15px; gap: 10px; flex: none; justify-content: flex-start; }
  .booking-day { margin: 0; font-size: 24px; }
  .booking-header { flex-direction: column; align-items: flex-start; }
  .booking-time { margin-top: 0; }
  .cost-label { display: block; margin-right: 0; }
  .cost-prices { align-items: flex-start; }
  .cost-coupon-meta { align-items: flex-end; text-align: right; }
  .cost-value { font-size: 17px; }
  .cost-value-discounted { font-size: 18px; }
}
@media (max-width: 640px) {
  .booking-card {padding:12px; border-radius:10px}
  .pet-card-footer {grid-template-columns:1fr}
  .pet-footer-btn:first-child {border-right:none; border-bottom:1px solid #f0f0f0}
  .pets-grid-modern {grid-template-columns:1fr}
  .booking-card__actions {width:100%}
  .booking-card__actions .btn {flex:1 1 auto; justify-content:center}
  .booking-card__body {flex-direction:column; gap:10px}
  .booking-card__header {align-items:flex-start}
  .calendar-modal-content { width: 96vw; height: 90vh; max-width: none; max-height: 90vh; border-radius: 12px; }
  .calendar-modal-body { padding: 12px; }
  .detail {font-size:12px}
  .details {gap:12px}
  .note {font-size:12px}
  .service-icon {width:36px; height:36px; font-size:16px}
  .service-text h4 {font-size:15px}
  .service-text .sub {font-size:12px}
  .status-badge {font-size:11px}
}
@media (max-width:768px){
  .account-status {padding:20px}
  .action-buttons {flex-direction:column}
  .action-buttons .btn {width:100%}
  .action-buttons {justify-content:center}
  .admin-note-section .admin-note {margin-left:0}
  .pet-behavior-grid {grid-template-columns:1fr}
  .pet-form-actions {flex-direction:column}
  .pet-form-actions .pet-form-btn {max-width:100%}
  .pet-form-page-header {padding:35px 20px}
  .pet-form-page-title {font-size:2rem}
  .pet-form-row {grid-template-columns:1fr}
  .pet-form-section-header {padding:22px 25px}
  .pet-size-group {grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .appointment-info { flex-direction: column; gap: 15px; text-align: center; }
  .behavior-label { font-size: 0.95rem; gap: 8px; }
  .behavior-label i { font-size: 1.1rem; }
  .book-header .book-title {font-size:1.6rem}
  .booking-actions {justify-content:center;flex-direction:column; gap:10px; width: 100%}
  .booking-form-container .base-service-selection .service-option-label{flex-direction:column; align-items:flex-start; gap:12px; padding:15px 18px 15px 45px}
  .booking-form-container .estimated-total{font-size:1rem}
  .booking-form-container .section-badge{align-self:flex-start}
  .booking-form-container .section-header-unified{flex-direction:column; align-items:flex-start; gap:8px}
  .booking-form-container .service-features-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; padding:0}
  .booking-form-container .service-price{align-self:flex-end; font-size:0.8rem;padding: 4px 8px}
  .booking-form-container .service-price-free {align-self:flex-end;padding: 4px 8px}
  .booking-form-container .total-amount{font-size:1.1rem}
  .booking-progress {padding:15px 10px; margin-bottom:20px}
  .booking-progress.compact .step-icon {width:35px; height:35px; font-size:1rem}
  .booking-progress {gap:6px}
  .booking-stats {justify-content:center; gap:30px}
  .bookings-stats {flex-direction:column; text-align:center}
  .breadcrumb-nav {display:none}
  .btn {justify-content:center; padding:10px 20px; width:100%}
  .btn-sm {justify-content:center; padding:12px 16px}
  .calendar-modal-body { padding: 14px; }
  .calendar-modal-content { width: 98vw; height: 90vh; max-height: 90vh; border-radius: 12px; }
  .calendar-modal-header { padding: 14px 18px; }
  .calendar-modal-footer {padding: 10px 18px 16px; flex-direction: column; gap: 12px; align-items: stretch;}
  .selected-slot-info {justify-content: center;}
  .modal-actions {width: 100%;}
  .modal-actions .btn {flex: 1;}
  .dashboard-grid {grid-template-columns:1fr; gap:20px}
  .form-actions {flex-direction:column; gap:12px}
  .form-actions .btn {max-width:100%; width:100%}
  .form-actions {flex-direction:column; gap:15px}
  .form-actions {flex-direction:column-reverse; gap:10px}
  .form-actions .btn {width:100%; justify-content:center}
  .form-row {grid-template-columns:1fr; gap:0}
  .form-section {padding:20px 0; margin-bottom:20px}
  .health-section .section-description { font-size: 0.85rem; }
  .health-section .section-header { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .health-section .section-icon { width: 40px; height: 40px; font-size: 1.25rem; margin-right: 0; }
  .health-section .section-title { font-size: 1.1rem; }
  .incomplete-bookings-section .section-title {font-size:1.6rem; flex-direction:column; gap:8px}
  .incomplete-bookings-section .section-title i {font-size:1.5rem}
  .modal-actions { width: 100%; }
  .modal-actions .btn { flex: 1; }
  .nav-tab {flex:0 0 auto; min-width:max-content; white-space:nowrap; padding:12px 16px; font-size:14px}
  .nav-tabs {flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none}
  .nav-tabs::-webkit-scrollbar {display:none}
  .option-item { padding: 16px; }
  .options-grid { grid-template-columns: 1fr; gap: 16px; }
  .other-options-content { padding: 20px; }
  .pet-form-container {padding:25px}
  .pet-section .form-content {padding-left:0; margin-top:10px}
  .pets-page-header {padding:25px 20px; border-radius:15px}
  .pets-header-content {flex-direction:column; text-align:center}
  .pets-page-title {font-size:2rem; flex-direction:column; gap:10px}
  .pets-page-title i {font-size:2rem}
  .pets-page-subtitle {font-size:1rem}
  .pets-add-btn {width:100%}
  .pets-grid-modern {grid-template-columns:1fr; gap:20px}
  .profile-card {padding:25px 20px}
  .profile-card h3 {font-size:1.3rem; margin-bottom:25px}
  .profile-content {grid-template-columns:1fr; gap:20px}
  .profile-tip-card {padding:18px}
  .profile-tip-card .tip-list li {font-size:0.85rem; padding:6px 0 6px 20px}
  .progress-connector {display:block; height:2px; top:18px}
  .section-title {font-size:1.6rem; flex-direction:column; gap:8px}
  .section-title i {font-size:1.5rem}
  .service-card {margin-left:0; flex-direction:column; text-align:left; gap:10px}
  .service-details h4 {font-size:1rem}
  .service-icon {width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem}

  .sidebar-toggle {display:block}
  .status-item {align-items:flex-start; gap:8px; padding:5px}
  .status-label {font-size:0.9rem}
  .status-value {align-self:flex-start}
  .time-header { min-width: 60px; }
  .time-slots-grid {grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
  .user-main-content {margin-left:0}
  .user-sidebar {transform:translateX(-100%)}
  .user-sidebar.show {transform:translateX(0)}
  .user-top-bar {padding:5px 20px}
  .vaccination-content { padding: 20px; }
  .vaccination-label { font-size: 0.95rem; }
  .pet-pictures .pet-pictures { padding: 16px; }
  .pet-pictures .content-grid { grid-template-columns: 1fr; gap: 20px; }
  .pet-pictures .avatar-card, .user-photos-card, .page-header { border-radius: 18px; margin-bottom: 24px; }
  .pet-pictures .pet-name { font-size: 28px; }
  .pet-pictures .pet-avatar-mini { width: 64px; height: 64px; }
  .pet-pictures .card-header-modern { padding: 20px 24px; }
  .pet-pictures .card-body-modern { padding: 24px; }
  .pet-pictures .avatar-preview-wrapper { width: 140px; margin: 0 auto 32px; }
  .pet-pictures .avatar-preview { width: 140px; height: 140px; }
  .pet-pictures .avatar-actions { flex-direction: column; }
  .pet-pictures .btn-reset { width: 100%; }
  .pet-pictures .photos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pet-pictures .service-sessions-grid { grid-template-columns: 1fr; gap: 20px; }
  .pet-pictures .service-session-card { padding: 20px; }
  .pet-pictures .comparison-pair { gap: 12px; padding: 12px; }
  .pet-pictures .transformation-arrow { font-size: 24px; min-width: 28px; }
  .pet-pictures .upload-zone { padding: 28px 20px; }
  .agreement-scroll-container {max-height:250px; padding:20px 15px}
  .agreement-checkbox-wrapper {padding:15px}
  .agreement-checkbox-wrapper-compact {padding:15px}
}
@media (max-width:1000px) {
  .account-status {position:static}
  .booking-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; width: 100%; }
  .bookings-container { flex-direction: column; }
  .bookings-sidebar { flex: none; width: 100%; margin-bottom: 10px; }
  .bookings-stats { flex-direction: column; padding: 15px; width: 100%; box-sizing: border-box; }
  
  #bookingsTab { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px; width: 100%; }
  #bookingsTab .nav-link { flex: 1 0 calc(50% - 4px); margin: 0 !important; text-align: center; justify-content: center; font-size: 0.85rem; padding: 15px; border-radius: 10px; background: #f8f9fa; border: 1px solid #eee; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
  #bookingsTab .nav-link.active { background-color: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(91, 154, 139, 0.3); }
  #bookingsTab .nav-link:hover { background-color: #f1f3f5; color: #343a40; border-color: #d7dde3; }
  #bookingsTab .nav-link:last-child:nth-child(odd) { flex: 1 0 100%; }

  .booking-actions-new { margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 10px; }

  .nav-pills { flex-direction: column !important; gap: 10px; width: 100%; }
  .nav-pills .nav-link { margin-bottom: 0; width: 100%; justify-content: flex-start; padding: 15px; background-color: #fff; border: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .nav-pills .nav-link.active,
  .nav-pills .nav-link.active:hover,
  .nav-pills .nav-link.active:focus,
  .nav-pills .nav-link.active:active { background-color: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(91, 154, 139, 0.3); }
  .nav-pills .nav-link:hover { background-color: #f1f3f5; color: #343a40; border-color: #d7dde3; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
  .profile-content {grid-template-columns:1fr; gap:20px}
  .profile-main {order:2}
  .profile-sidebar {order:1; max-width:100%}
  .profile-tip-card {margin-top:20px}
  .stat-item { flex: 1 1 calc(50% - 10px); min-width: 140px; display: flex; flex-direction: column; align-items: center; padding: 10px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
  .pet-pictures .content-grid { grid-template-columns: repeat(2, 1fr); }
  .pet-pictures .avatar-card { grid-column: span 2; }
  .pet-pictures .card-body-modern { padding: 10px; }
  .pet-pictures .service-sessions-grid { grid-template-columns: 1fr; }
  .pet-pictures .photos-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 1200px) {
}
@media (max-width: 768px) {
  .pet-gender-radio-group, .pet-type-radio-group {flex-wrap:nowrap!important}
  .pet-gender-radio-group .pet-radio-item, .pet-type-radio-group .pet-radio-item {min-width:0!important}
}