/*==================================================
  SUNSHINE MAKEUP STUDIO - LUXURY APPOINTMENT MODAL
  Pixel-Perfect Responsive Implementation
==================================================*/

:root {
  --modal-burgundy: #8B1D38;
  --modal-burgundy-dark: #610A1E;
  --modal-burgundy-hover: #A42444;
  --modal-gold: #DEBC97;
  --modal-gold-ring: #E8C8B5;
  --modal-card-border: #F5E5DC;
  --modal-input-bg: #F8F2EE;
  --modal-input-border: #EBE0D8;
  --modal-input-icon: #9E8C90;
  --modal-text-dark: #1C1314;
  --modal-text-body: #5C4D50;
  --modal-text-muted: #6E5C60;
  --modal-font-serif: 'Playfair Display', Georgia, serif;
  --modal-font-script: 'Alex Brush', cursive, 'Playfair Display', serif;
  --modal-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --modal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Modal Overlay & Dimmer */
.sunshine-appointment-modal.modal {
  z-index: 10550 !important;
  background: rgba(15, 5, 10, 0.65) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  padding: 0 !important;
}

.sunshine-appointment-modal .modal-dialog {
  max-width: 860px !important;
  margin: 1.75rem auto !important;
  z-index: 10560 !important;
}

.sunshine-appointment-modal.modal.fade .modal-dialog {
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s var(--modal-ease), opacity 0.35s ease;
}

.sunshine-appointment-modal.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* 2. Elevated Solid White Card Container */
.sunshine-appointment-modal .modal-content,
.sunshine-modal-card {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-radius: 28px !important;
  border: 1.5px solid var(--modal-card-border) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(139, 29, 56, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* 3. Close Button (Top-Right) */
.sunshine-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F8ECE7;
  border: 1px solid #EEDCD4;
  color: #555555;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sunshine-modal-close:hover {
  background: var(--modal-burgundy);
  color: #FFFFFF;
  border-color: var(--modal-burgundy);
  transform: rotate(90deg) scale(1.05);
}

/* 4. Two-Column Split Layout */
.sunshine-modal-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  min-height: 520px;
  background-color: #FFFFFF;
}

/* --------------------------------------------------
   LEFT COLUMN: Photo & Emotional Hook
-------------------------------------------------- */
.sunshine-modal-left {
  background: linear-gradient(180deg, #FBF0E9 0%, #F8E7DF 100%) !important;
  padding: 30px 24px 28px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1.5px solid var(--modal-card-border);
}

/* Botanical Watermark in Left Column */
.modal-left-decor {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M190 190C140 150 110 100 80 40' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.22'/%3E%3Cpath d='M140 150C120 155 95 140 85 120' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.18' stroke-dasharray='2 2'/%3E%3Cpath d='M110 100C90 105 65 95 55 75' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.18' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
}

/* Arched Bride Image Frame */
.modal-bride-frame {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1.08;
  border-radius: 20px 20px 90px 20px;
  overflow: hidden;
  border: 3px solid #FFFFFF;
  box-shadow: 0 12px 30px rgba(139, 29, 56, 0.16);
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.modal-bride-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Left Typography */
.modal-left-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 18px;
}

.modal-left-title {
  font-family: var(--modal-font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--modal-text-dark);
  line-height: 1.25;
  margin-bottom: 4px;
}

.modal-left-title .script-highlight {
  font-family: var(--modal-font-script);
  font-size: 32px;
  color: var(--modal-burgundy);
  font-weight: 400;
  display: inline-block;
  margin: 0 2px;
}

.modal-left-ornament {
  color: var(--modal-burgundy);
  font-size: 13px;
  margin-bottom: 6px;
  opacity: 0.85;
}

.modal-left-desc {
  font-family: var(--modal-font-sans);
  font-size: 12.5px;
  color: var(--modal-text-body);
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------
   RIGHT COLUMN: Appointment Booking Form (Solid Background)
-------------------------------------------------- */
.sunshine-modal-right {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  padding: 34px 38px 28px 38px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/* Top Right Botanical Watermark */
.modal-right-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M160 -10C120 20 80 40 40 70' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.22'/%3E%3Cpath d='M120 20C100 10 75 18 65 35' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.18' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
}

/* Header */
.modal-right-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.modal-calendar-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FDE8E2;
  border: 1.5px solid var(--modal-gold-ring);
  color: var(--modal-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 10px;
  box-shadow: 0 4px 12px rgba(139, 29, 56, 0.1);
}

.modal-calendar-badge i {
  color: var(--modal-burgundy);
}

.modal-form-title {
  font-family: var(--modal-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--modal-burgundy);
  margin-bottom: 4px;
  line-height: 1.2;
}

.modal-form-desc {
  font-family: var(--modal-font-sans);
  font-size: 12.5px;
  color: var(--modal-text-body);
  margin: 0;
  line-height: 1.45;
}

/* Form Elements */
.sunshine-modal-form {
  position: relative;
  z-index: 2;
}

.modal-form-row {
  margin-bottom: 12px;
}

.modal-form-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.modal-input-icon {
  position: absolute;
  left: 15px;
  color: var(--modal-input-icon);
  font-size: 13.5px;
  pointer-events: none;
  z-index: 3;
  transition: color 0.3s ease;
}

.modal-form-control {
  width: 100%;
  height: 46px;
  background-color: var(--modal-input-bg) !important;
  border: 1.5px solid var(--modal-input-border) !important;
  border-radius: 12px !important;
  padding: 0 14px 0 42px !important;
  font-family: var(--modal-font-sans) !important;
  font-size: 13px !important;
  color: var(--modal-text-dark) !important;
  transition: all 0.3s var(--modal-ease) !important;
  box-shadow: none !important;
}

.modal-form-control::placeholder {
  color: var(--modal-input-icon) !important;
  font-weight: 400 !important;
  opacity: 0.95 !important;
}

.modal-form-control:focus {
  background-color: #FFFFFF !important;
  border-color: var(--modal-burgundy) !important;
  box-shadow: 0 0 0 3px rgba(139, 29, 56, 0.12) !important;
  outline: none !important;
}

.modal-input-wrap:focus-within .modal-input-icon {
  color: var(--modal-burgundy);
}

/* Textarea Wrap */
.modal-input-wrap.textarea-wrap {
  position: relative;
  display: block;
}

.modal-input-icon.textarea-icon {
  top: 14px;
}

.modal-textarea {
  height: 82px !important;
  padding: 12px 14px 22px 42px !important;
  resize: none !important;
}

.modal-char-count {
  position: absolute;
  bottom: 6px;
  right: 12px;
  font-family: var(--modal-font-sans);
  font-size: 10.5px;
  color: var(--modal-input-icon);
  pointer-events: none;
  z-index: 3;
}

/* Submit Button */
.modal-submit-wrap {
  margin-top: 14px;
}

.sunshine-modal-submit-btn {
  width: 100% !important;
  height: 48px !important;
  background: linear-gradient(90deg, #8B1D38 0%, #680E23 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--modal-font-sans) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(139, 29, 56, 0.32) !important;
  transition: all 0.3s var(--modal-ease) !important;
  cursor: pointer !important;
}

.sunshine-modal-submit-btn span {
  color: #FFFFFF !important;
  font-family: var(--modal-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.sunshine-modal-submit-btn i {
  color: #FFFFFF !important;
  font-size: 13px !important;
  transition: transform 0.25s ease !important;
}

.sunshine-modal-submit-btn:hover {
  background: linear-gradient(90deg, var(--modal-burgundy-hover) 0%, var(--modal-burgundy-dark) 100%) !important;
  box-shadow: 0 12px 30px rgba(139, 29, 56, 0.45) !important;
  transform: translateY(-2px) !important;
}

.sunshine-modal-submit-btn:hover i {
  transform: translateX(4px) !important;
}

/* Bottom Trust Bar */
.modal-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 2px;
}

.modal-trust-bar .trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--modal-font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--modal-text-muted);
}

.modal-trust-bar .trust-item i {
  color: var(--modal-burgundy);
  font-size: 12px;
}

.modal-trust-bar .trust-divider {
  color: #E6D4CC;
  font-size: 11px;
}

/* --------------------------------------------------
   5. RESPONSIVE BREAKPOINTS
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .sunshine-modal-layout {
    grid-template-columns: 1fr;
  }
  .sunshine-modal-left {
    padding: 24px 20px;
    border-right: none;
    border-bottom: 1.5px solid var(--modal-card-border);
  }
  .modal-bride-frame {
    max-width: 170px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }
  .modal-left-title {
    font-size: 20px;
  }
  .modal-left-title .script-highlight {
    font-size: 26px;
  }
  .sunshine-modal-right {
    padding: 26px 22px 24px 22px;
  }
}

@media (max-width: 575.98px) {
  .sunshine-appointment-modal .modal-dialog {
    margin: 0.8rem;
  }
  .sunshine-modal-card {
    border-radius: 22px !important;
  }
  .sunshine-modal-close {
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .modal-form-row.two-cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .modal-form-title {
    font-size: 22px;
  }
  .sunshine-modal-right {
    padding: 22px 16px 20px 16px;
  }
  .modal-trust-bar {
    gap: 8px;
    font-size: 10px;
    flex-wrap: wrap;
  }
  .modal-trust-bar .trust-item {
    font-size: 10px;
  }
  .modal-trust-bar .trust-divider {
    display: none;
  }
}