:root {
      --blush-pink: #FBCBE1;
      --cherry-sangria: #73001C;
      --vanilla-pop: #FFF1B5;
      --toasted-rosemilk: #B3998D;
      --bg-color: #FFFDF9;
      --card-bg: #FFFFFF;
      --text-dark: #2B1810;
      --text-muted: #6E5D57;
      --border-color: #F3E6EC;
      --green-success: #1E824C;
      --green-bg: #E8F8F0;
      --red-alert: #C0392B;
      --red-bg: #FADBD8;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background-color: var(--bg-color);
      font-family: 'Source Sans 3', sans-serif;
      color: var(--text-dark);
      margin: 0;
      padding: 32px 16px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .portal-container {
      background: var(--card-bg);
      border-radius: 20px;
      border: 1px solid var(--border-color);
      box-shadow: 0 12px 40px rgba(115, 0, 28, 0.05);
      width: 100%;
      max-width: 600px;
      padding: 40px 36px;
      position: relative;
    }

    .session-status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFF5F9;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 12.5px;
      color: var(--cherry-sangria);
      margin-bottom: 20px;
    }

    .session-logout-link {
      color: var(--cherry-sangria);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }

    .brand-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .brand-logo {
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 2px;
      color: var(--cherry-sangria);
      text-transform: uppercase;
      margin: 0 0 6px 0;
    }

    .portal-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--text-dark);
      margin: 0 0 8px 0;
    }

    .portal-subtitle {
      font-size: 14px;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    .stepper {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      margin-top: 24px;
    }

    .step-bar {
      flex: 1;
      height: 5px;
      background: #F8E8EE;
      border-radius: 3px;
      transition: background 0.3s ease;
    }

    .step-bar.active {
      background: var(--cherry-sangria);
    }

    .form-group {
      margin-bottom: 24px;
    }

    label {
      display: block;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--cherry-sangria);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    input[type="text"], input[type="email"], select, textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1.5px solid var(--border-color);
      border-radius: 10px;
      font-size: 15px;
      background: #FFFBFD;
      outline: none;
      transition: all 0.2s ease;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--cherry-sangria);
      box-shadow: 0 0 0 3px rgba(115, 0, 28, 0.08);
      background: #FFFFFF;
    }

    .btn-pink {
      width: 100%;
      padding: 15px;
      background: var(--blush-pink);
      color: var(--cherry-sangria);
      font-family: 'Montserrat', sans-serif;
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 0.5px;
      text-decoration: none;
      display: inline-block;
      text-align: center;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-pink:hover {
      background: #f7b4ce;
      transform: translateY(-1px);
    }

    .btn-pink:disabled {
      background: #fce8f1;
      color: #bfa5af;
      cursor: not-allowed;
      transform: none;
    }

    .btn-secondary {
      width: 100%;
      padding: 12px;
      background: transparent;
      color: var(--cherry-sangria);
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      cursor: pointer;
      margin-top: 12px;
      transition: all 0.2s ease;
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

    .btn-secondary:hover {
      background: #FFF0F5;
      border-color: var(--blush-pink);
    }

    .email-help-notice {
      background: #FFFDF5;
      border: 1px solid #F6E58D;
      border-radius: 10px;
      padding: 12px 14px;
      margin-top: 16px;
      font-size: 12.5px;
      color: #6D4C41;
      line-height: 1.45;
    }

    /* Branded Order Loading Animation & Skeleton Styles */
    .orders-loading-card {
      text-align: center;
      padding: 32px 20px;
      background: #FFFBFD;
      border: 1.5px solid var(--border-color);
      border-radius: 16px;
      margin-bottom: 20px;
      animation: fadeIn 0.3s ease;
    }

    .spinner-sparkle-container {
      position: relative;
      width: 56px;
      height: 56px;
      margin: 0 auto 16px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .spinner-sparkle-ring {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3.5px solid #F8E8EE;
      border-top-color: var(--cherry-sangria);
      border-right-color: var(--blush-pink);
      animation: spinRing 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }

    .spinner-sparkle-icon {
      font-size: 22px;
      animation: pulseSparkle 1.2s ease-in-out infinite alternate;
    }

    .loading-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 15.5px;
      color: var(--cherry-sangria);
      margin-bottom: 4px;
    }

    .loading-subtitle {
      font-size: 13.5px;
      color: var(--text-muted);
      margin-bottom: 22px;
    }

    .skeleton-order-card {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 16px;
      text-align: left;
    }

    .skeleton-line-header {
      height: 16px;
      width: 55%;
      border-radius: 6px;
      background: linear-gradient(90deg, #F8E8EE 25%, #FFF0F5 50%, #F8E8EE 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      margin-bottom: 10px;
    }

    .skeleton-line-sub {
      height: 12px;
      width: 40%;
      border-radius: 4px;
      background: linear-gradient(90deg, #F8E8EE 25%, #FFF0F5 50%, #F8E8EE 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      margin-bottom: 14px;
    }

    .skeleton-thumb-row {
      display: flex;
      gap: 8px;
    }

    .skeleton-box {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: linear-gradient(90deg, #F8E8EE 25%, #FFF0F5 50%, #F8E8EE 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    @keyframes spinRing {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes pulseSparkle {
      0% { transform: scale(0.9); opacity: 0.8; }
      100% { transform: scale(1.15); opacity: 1; }
    }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* Section Divider Header */
    .section-divider-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: var(--cherry-sangria);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 18px 0 10px 0;
    }

    .section-divider-title.ineligible-section-title {
      color: #888888;
    }

    /* Order Card Styling */
    .order-card {
      border: 1.5px solid var(--border-color);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: #FFFFFF;
      position: relative;
    }

    .order-card.eligible-card:hover {
      border-color: var(--blush-pink);
      box-shadow: 0 6px 16px rgba(251, 203, 225, 0.25);
    }

    .order-card.selected {
      border-color: var(--cherry-sangria);
      background: #FFF7FA;
      box-shadow: 0 0 0 2px var(--cherry-sangria);
    }

    .order-card.ineligible-card {
      opacity: 0.55;
      background: #F8F8F8;
      border-color: #E2E2E2;
      cursor: not-allowed !important;
      pointer-events: none;
    }

    .order-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: var(--cherry-sangria);
      margin-bottom: 8px;
    }

    .order-card.ineligible-card .order-card-header {
      color: #666666;
    }

    .order-thumbnails-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-top: 6px;
    }

    .order-thumb-img {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid var(--border-color);
      background: #f9f9f9;
    }

    /* Badges */
    .badge-eligible {
      display: inline-block;
      font-size: 11px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: var(--green-success);
      background: var(--green-bg);
      padding: 4px 10px;
      border-radius: 12px;
      border: 1px solid #A3E4D7;
    }

    .badge-ineligible {
      display: inline-block;
      font-size: 11px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: #721C24;
      background: #FADBD8;
      padding: 4px 10px;
      border-radius: 12px;
      border: 1px solid #F5B7B1;
    }

    .badge-warning {
      display: inline-block;
      font-size: 11px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: #856404;
      background: #FFF3CD;
      padding: 3px 8px;
      border-radius: 10px;
      border: 1px solid #FFEEBA;
    }

    .ineligible-reason-text {
      font-size: 12px;
      color: #721C24;
      margin-top: 8px;
      line-height: 1.4;
      background: #FFF5F5;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #FADBD8;
    }

    /* Line Item Checklist Card */
    .item-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border: 1.5px solid var(--border-color);
      border-radius: 12px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .item-card.selected {
      border-color: var(--cherry-sangria);
      background: #FFF7FA;
    }

    .item-card.disabled-item {
      opacity: 0.6;
      background: #FAFAFA;
      border-color: #E2E2E2;
    }

    .item-preview-img {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      object-fit: cover;
      border: 1px solid var(--border-color);
      background: #F8F8F8;
    }

    .item-info {
      flex: 1;
    }

    .item-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-dark);
    }

    .item-variant {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* 3 Dedicated Photo Slots Layout */
    .photo-slots-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 12px;
    }

    .photo-slot-card {
      border: 2px dashed var(--blush-pink);
      border-radius: 12px;
      height: 110px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #FFFDFE;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .photo-slot-card:hover {
      border-color: var(--cherry-sangria);
      background: #FFF5F9;
    }

    .photo-slot-card.filled {
      border-style: solid;
      border-color: var(--cherry-sangria);
      background: #FFFFFF;
    }

    .slot-img-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .slot-delete-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      background: var(--cherry-sangria);
      color: #FFFFFF;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: 700;
      border: 1.5px solid #FFFFFF;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .slot-icon {
      font-size: 24px;
      margin-bottom: 2px;
    }

    .slot-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      font-weight: 700;
      color: var(--cherry-sangria);
    }

    .ticket-badge {
      display: inline-block;
      background: var(--vanilla-pop);
      color: var(--cherry-sangria);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      padding: 8px 16px;
      border-radius: 20px;
      margin-bottom: 16px;
      border: 1px solid #F0DF95;
    }

    .hidden { display: none !important; }

    /* Address Edit Modal & Component Styles */
    .btn-edit-address {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background-color: #FFFDF9;
      color: #73001C;
      border: 1.5px solid #73001C;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      cursor: pointer !important;
      pointer-events: auto !important;
      transition: all 0.2s ease;
      margin-top: 8px;
    }

    .order-card.ineligible-card .btn-edit-address {
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    .btn-edit-address:hover {
      background-color: #73001C;
      color: #FFFFFF;
    }

    .address-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(43, 24, 16, 0.6);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
    }

    .address-modal-content {
      background: #FFFFFF;
      border-radius: 20px;
      max-width: 520px;
      width: 100%;
      padding: 24px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.2);
      border: 1px solid #F3E6EC;
      max-height: 90vh;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .address-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .address-modal-close {
      background: none;
      border: none;
      font-size: 28px;
      line-height: 1;
      color: #6E5D57;
      cursor: pointer;
      padding: 0 4px;
    }

    .address-timer-banner {
      background-color: #FFF1B5;
      color: #73001C;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      text-align: center;
      border: 1px solid #F0DF95;
    }

    .address-field-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
    }

    .address-field-group label {
      font-size: 12px;
      font-weight: 700;
      color: #2B1810;
      margin-bottom: 4px;
    }

    .address-field-group input {
      padding: 10px 14px;
      border-radius: 10px;
      border: 1.5px solid #E6DCD7;
      font-size: 14px;
      font-family: inherit;
      color: #2B1810;
      transition: border-color 0.2s ease;
    }

    .address-field-group input:focus {
      outline: none;
      border-color: #73001C;
    }

    .address-field-row {
      display: flex;
      gap: 12px;
    }

    .address-alert-error {
      background-color: #FDE8E8;
      color: #9B1C1C;
      border: 1px solid #F8B4B4;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 14px;
      line-height: 1.4;
    }

    .address-alert-success {
      background-color: #DEF7EC;
      color: #03543F;
      border: 1px solid #84E1BC;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 14px;
      line-height: 1.4;
    }

    .address-info-note {
      background-color: #F8F5F2;
      color: #6E5D57;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      margin: 14px 0;
      line-height: 1.4;
    }

    .address-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    .btn-address-cancel {
      background: #F5F0EB;
      color: #6E5D57;
      border: none;
      padding: 10px 18px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .btn-address-submit {
      background: #73001C;
      color: #FFFFFF;
      border: none;
      padding: 10px 22px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .btn-address-submit:disabled {
      background: #D1C7C3;
      cursor: not-allowed;
    }