/* Order flow layout refinements
   - Sticky header shows only the progress indicator
   - Single, unified title below the pinned area
   - Balanced spacing for a cohesive, modern flow */

/* Prevent desktop layout shift when vertical scrollbar toggles */
html { scrollbar-gutter: stable; }

/* Remove sticky positioning from main navbar on order pages */
.navbar.sticky-top {
    position: static !important;
}

.order-header {
  position: sticky;
  /* Stick to the very top of the viewport */
  top: 0;
  z-index: 1000;
  background-color: var(--color-background);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.order-header .step-indicator { margin: 0; padding: var(--space-sm) 0; }
.order-header .step-indicator__list { margin-bottom: 0; }

.flow-title {
  padding: var(--space-sm) 0;
  text-align: center;
  margin-bottom: var(--space-lg);
}

.flow-title__heading {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-xs) 0;
  text-align: center;
}

.flow-title__description {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  margin: 0;
  text-align: center;
}

/* Reduce in-between gaps for cohesive visual rhythm */
.order-main .step-content .step-container { margin-top: 0; }

/* Hide any legacy step headers if still present */
.step-header { display: none !important; }

/* Mobile tuning */
@media (max-width: 768px) {
  .flow-title {
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
  }
  .flow-title__heading { font-size: var(--font-size-xl); }
  .flow-title__description { font-size: var(--font-size-sm); }
}

/* Subtle shake for invalid continue click */
@keyframes gp-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.btn--continue.shake {
  animation: gp-shake 0.4s ease;
}

/* Settings step photo-item layout */
.photo-item { background: var(--color-background-secondary); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-md); padding: var(--space-md); margin-bottom: var(--space-md); display:flex; flex-direction:column; gap: var(--space-md); }
.photo-item .photo-thumbnails { margin-bottom: var(--space-sm) !important; }

/* Footer polish: compact, non-intrusive, consistent */
.order-footer { padding-top: var(--space-xs); padding-bottom: max(env(safe-area-inset-bottom), var(--space-xs)); }
.order-footer__container { padding: 0 var(--container-padding); }

/* Keep footer button compact on desktop */
.order-footer .btn--continue { width: auto; min-height: 44px; font-size: var(--font-size-base); padding: var(--space-sm) var(--space-lg); }
.order-footer .btn--ghost { min-height: 40px; font-size: var(--font-size-sm); }

/* Price display in footer */
.order-footer .price-display { display: grid; grid-template-columns: auto; justify-items: center; gap: 2px; }
.order-footer .price-display__total { font-size: var(--font-size-xxl); font-weight: var(--font-weight-semibold); color: var(--color-primary); line-height: var(--line-height-tight); }
.order-footer .price-display__description { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.order-footer .price-display__tier { font-size: var(--font-size-xs); color: var(--color-text-light); }
.order-footer .price-display__badge { margin-top: 2px; font-size: var(--font-size-xs); color: #0f5132; background: #d1e7dd; border: 1px solid #badbcc; padding: 2px 8px; border-radius: var(--border-radius-full); }

/* Step 1: ensure price stays centered even without a visible back button */
@media (min-width: 769px) {
  .order-page:has(#step-1-content.active) .order-footer__back {
    display: block !important;       /* override inline display:none */
    visibility: hidden;              /* keep space but hide visually */
    min-width: 140px;                /* mirror continue button min-width for symmetry */
  }
}

/* Prevent overlap with content (extra safety) */
.order-content { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

@media (max-width: 768px) {
  .order-footer .price-display__total { font-size: var(--font-size-xl); }
  .order-footer .btn--continue { width: 100%; min-height: 48px; }
  .order-content { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .order-content { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
}

/* On the order page, allow the site navbar to scroll with content (not fixed) */
nav.navbar.fixed-top {
  position: static !important;
}

/* Only main page title is centered; section/card titles keep original alignment */
.customer-form .form-section-title, .customer-form .form-section-description {
  display: none;
}

/* Better readable badges */
.photo-count-badge { background: var(--color-primary) !important; color: #fff !important; }
.style-card__count { color: #fff !important; background: var(--color-primary) !important; }

/* Keep primary button dark (no lighter hover) */
.btn--primary, .btn--primary:hover, .btn--primary:active, .btn--primary:disabled {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Streamlined per-segment connectors with gap and perfect centering */
.step-indicator {
  /* Geometry */
  --circle: 32px;     /* inner circle size */
  --border: 2px;      /* circle border */
  --gap: 6px;         /* space between circle edge and line */
  --line: 2px;        /* connector thickness */
  --outer: calc(var(--circle) + 2 * var(--border));
  --offset: calc(calc(var(--outer) / 2) + var(--gap));
  --between: var(--space-md); /* list gap between items */
  --segment: calc(100% - (var(--offset) * 2) + var(--between));
}

/* Remove vertical padding so vertical center is invariant */
.step-indicator__button { padding-top: 0 !important; padding-bottom: 0 !important; }
.step-indicator__label { margin-top: var(--space-xs); }

/* Circles on top */
.step-indicator__number { position: relative; z-index: 2; box-sizing: border-box; }

/* Re-enable per-item connectors and compute position from geometry */
.step-indicator__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--outer) / 2 - var(--line) / 2);
  left: calc(50% + var(--offset));
  width: var(--segment);
  height: var(--line);
  transform: none; /* exact pixel center */
  z-index: 0;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .step-indicator {
    --circle: 28px;
    --border: 2px;
    --gap: 4px;
    --outer: calc(var(--circle) + 2 * var(--border));
    --offset: calc(calc(var(--outer) / 2) + var(--gap));
    --between: var(--space-xs);
    --segment: calc(100% - (var(--offset) * 2) + var(--between));
  }
}

/* Voucher field compact */
#field-voucher { max-width: 320px; }
#field-voucher, #field-voucher ~ .form-help { margin-left: auto; margin-right: auto; display: block; }

/* Force thumbnails strip below button (static, white background) */
.style-card__thumbnails {
  position: static !important;
  background: var(--color-background) !important;
  margin-top: var(--space-sm) !important;
  padding: var(--space-sm) !important;
  border: var(--border-width) var(--border-style) var(--color-border-light) !important;
  border-radius: var(--border-radius-md) !important;
}

/* Payment/checkout cards visual polish */
.summary-card { background: var(--color-background-primary); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.summary-card__header { display:flex; align-items:center; justify-content:space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--border-width) var(--border-style) var(--color-border-light); }
.summary-card__title { margin:0; font-size: var(--font-size-lg); }
.summary-card__content { padding: var(--space-lg); }

.payment-method { display:flex; align-items:center; gap: var(--space-md); padding: var(--space-md); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-md); background: var(--color-background-secondary); }
.payment-method--selected { border-color: var(--color-primary); background: rgba(32,41,84,0.04); }
.payment-method__icon { font-size: var(--font-size-xxl); }
.payment-method__name { font-weight: var(--font-weight-semibold); }
.payment-method__description { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* Improved responsive checkout layout */
.checkout-grid { 
  display: grid; 
  gap: var(--space-xl); 
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Tablet - stay single column for better readability */
@media (min-width: 768px) and (max-width: 1279px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    max-width: 800px;
    gap: var(--space-lg);
  }
}

/* Desktop - improved two-column layout */
@media (min-width: 1280px) {
  .checkout-grid { 
    grid-template-columns: 1.5fr 1fr; /* 60/40 split for better space distribution */
    align-items: start;
    gap: 2.5rem;
    padding: 0 var(--space-lg);
  }
  
  .checkout-sidebar { 
    position: sticky; 
    top: 120px;
    min-width: 380px; /* More space for payment elements */
  }
}

/* Wide desktop optimization */
@media (min-width: 1440px) {
  .checkout-grid {
    gap: 3rem;
    padding: 0 var(--space-xl);
  }
}

/* Price summary emphasis */
.price-summary { background: var(--color-background-primary); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xs); }
.price-summary__header, .price-summary__content { padding: var(--space-lg); }
.price-summary__row { display:flex; align-items:center; justify-content: space-between; padding: var(--space-xs) 0; }
.price-summary__row--divider { border-top: var(--border-width) var(--border-style) var(--color-border-light); margin-top: var(--space-xs); padding-top: var(--space-xs); }
.price-summary__row--total { border-top: var(--border-width) var(--border-style) var(--color-border-light); padding-top: var(--space-sm); }
.price-summary__label { color: var(--color-text); font-weight: var(--font-weight-medium); }
.price-summary__value { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.price-summary__total { font-size: var(--font-size-xxl); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.price-summary__tier { margin-top: var(--space-sm); text-align: left; }
.price-summary__tier-text { color: var(--color-text-light); }

/* Customer info summary (key-value layout) */
#customer-info-display { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); }
#customer-info-display > div { display:flex; gap: var(--space-xs); }
#customer-info-display > div strong { width: 110px; color: var(--color-text-light); font-weight: var(--font-weight-medium); }

/* Photos summary grid */
.photo-review-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
    gap: var(--space-sm); 
    max-height: 320px;
    overflow-y: auto;
}

.photo-review-grid .photo-thumbnail { 
    position: relative;
    width: 100%; 
    height: 80px; 
    border-radius: var(--border-radius-md); 
    overflow: hidden; 
    border: var(--border-width) var(--border-style) var(--color-border-light);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.photo-review-grid .photo-thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
}

.photo-review-grid .photo-thumbnail img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform var(--transition-fast);
}

.photo-review-grid .photo-thumbnail:hover img {
    transform: scale(1.05);
}

.photo-thumbnail__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: var(--space-xs);
    transform: translateY(100%);
    transition: transform var(--transition-fast);
}

.photo-review-grid .photo-thumbnail:hover .photo-thumbnail__overlay {
    transform: translateY(0);
}

.photo-thumbnail__style {
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.photo-review-grid .photo-thumbnail--more { 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    font-weight: var(--font-weight-semibold); 
    color: var(--color-primary); 
    background: var(--color-background-secondary);
    border: 2px dashed var(--color-border);
}

.photo-thumbnail__count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 2px;
}

.photo-thumbnail__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Improved Payment Method Selection */
.payment-methods {
    margin-bottom: var(--space-md);
}

.payment-method {
    border: 2px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    overflow: hidden;
    background: var(--color-background);
}

.payment-method:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.payment-method--selected {
    border-color: var(--color-primary);
    background: rgba(32, 41, 84, 0.02);
}

.payment-method__radio {
    position: relative;
}

.payment-method__radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.payment-method__label {
    display: block;
    cursor: pointer;
    padding: var(--space-md);
    margin: 0;
}

.payment-method__content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.payment-method__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
}

.payment-method__details {
    flex: 1;
}

.payment-method__name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xs);
}

.payment-method__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
}

/* Payment Security Badge */
.payment-security {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-light);
}

.payment-security__icon {
    font-size: var(--font-size-lg);
    opacity: 0.8;
}

.payment-security__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-security__title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.payment-security__subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* Legacy security badge (keep for other uses) */
.security-badge { 
    display: flex; 
    align-items: center; 
    gap: var(--space-xs); 
    color: var(--color-text-light); 
    justify-content: center; 
}
.security-badge__icon { 
    opacity: .9; 
}

/* Desktop container width harmony */
.order-page .container { 
  width: 100%;
  max-width: 1100px; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Payment page (Step 4) should use full screen width and remain stable */
#step-4-content .container,
#step-4-content .checkout-container,
#step-4-content .order-review {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  box-sizing: border-box;
}

/* Prevent horizontal overflow when expanding sections */
#step-4-content .checkout-layout,
#step-4-content .review-section,
#step-4-content .photos-summary,
#step-4-content .photo-strip,
#step-4-content #photo-review-grid {
  max-width: 100%;
  overflow-x: hidden;
}

/* Better visual hierarchy for Step 4 */
#step-4-content .summary-card { transition: box-shadow var(--transition-normal), transform var(--transition-fast); }
#step-4-content .summary-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* Summary card header actions */
.summary-card__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.summary-card__badge {
    background: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.btn--small {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    min-height: 32px;
}

.btn--text {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn--text:hover {
    background: var(--color-primary);
    color: white;
}

/* Info card styling */
.summary-card--info {
    background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
    border-color: #e0e7ff;
}

/* Timeline component */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.timeline-item__icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.timeline-item__content {
    flex: 1;
    padding-top: var(--space-xs);
}

.timeline-item__title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.timeline-item__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
}

/* Guarantee card styles removed - no longer needed */

/* Photo Overview for Payment Screen */
.photo-overview {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.style-group {
    border: var(--border-width) var(--border-style) var(--color-border-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-background);
}

.style-group__header {
    background: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
}

.style-group__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.style-group__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-semibold);
}

.style-group__photos {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.photo-overview-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm);
    border: var(--border-width) var(--border-style) var(--color-border-light);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}

.photo-overview-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.photo-overview-item__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-border-light);
}

.photo-overview-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overview-item__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.photo-overview-item__name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-base);
    word-break: break-word;
}

.photo-overview-item__settings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.setting-item {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 2px var(--space-xs);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.setting-default {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Mobile spacing for Step 4 */
@media (max-width: 768px) {
    .summary-card__content { padding: var(--space-md); }
    .price-summary__total { font-size: var(--font-size-xxl); }
    
    .summary-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .summary-card__header-actions {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .timeline-item {
        gap: var(--space-sm);
    }
    
    .timeline-item__icon {
        width: 36px;
        height: 36px;
    }
    
    .photo-review-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .photo-review-grid .photo-thumbnail {
        height: 60px;
    }
    
    /* FIX: Mobile style card images not filling properly */
    .style-card__image {
        /* Maintain aspect ratio instead of fixed height to prevent side cropping */
        aspect-ratio: 4 / 3 !important;
        min-height: 140px !important;
        height: auto !important;
        /* Ensure background properties are maintained */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Mobile photo overview adjustments */
    .photo-overview-item {
        gap: var(--space-sm);
        padding: var(--space-xs);
    }
    
    .photo-overview-item__image {
        width: 60px;
        height: 60px;
    }
    
    .photo-overview-item__name {
        font-size: var(--font-size-sm);
    }
    
    .style-group__photos {
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    
    .style-group__header {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    /* Mobile payment method adjustments */
    .payment-method__label {
        padding: var(--space-sm);
    }
    
    .payment-method__content {
        gap: var(--space-sm);
    }
    
    .payment-method__icon {
        width: 36px;
        height: 36px;
    }
    
    .payment-method__name {
        font-size: var(--font-size-sm);
        margin-bottom: 2px;
    }
    
    .payment-method__description {
        font-size: var(--font-size-xs);
    }
    
    .payment-security {
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-xs);
    }
}

/* Compact PayPal Button Styling Override */
.payment-method__label {
    padding: var(--space-sm) var(--space-md) !important;
}

.payment-method__content {
    gap: var(--space-sm) !important;
}

.payment-method__icon {
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
}

.payment-method__icon svg {
    width: 24px !important;
    height: 24px !important;
}

.payment-method__name {
    font-size: var(--font-size-sm) !important;
    margin-bottom: 2px !important;
}

.payment-method__description {
    font-size: var(--font-size-xs) !important;
    line-height: 1.3 !important;
}

.payment-method {
    border-width: 1px !important;
}

.payment-method:hover {
    box-shadow: var(--shadow-xs) !important;
}

/* Payment step: compact vertical list with optional expand */
#photo-review-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(56px, auto);
  gap: var(--space-xs);
  max-height: 280px; /* show more items at a glance */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%; /* Avoid screen width expansion on expand */
}

#photo-review-grid.photo-review-grid--expanded { max-height: none; }

.photo-summary-item { display: grid !important; grid-template-columns: 56px minmax(0,1fr); gap: var(--space-sm); align-items: center; min-height: 56px; }
@media (min-width: 1024px) { .photo-summary-item { grid-template-columns: 64px 1fr; } }
@media (max-width: 480px) { .photo-summary-item { grid-template-columns: 48px 1fr; } }
.photo-summary-item__thumb { width: 100%; height: 56px; border-radius: var(--border-radius-sm); overflow: hidden; border: 1px solid var(--color-border-light); }
@media (min-width: 1024px) { .photo-summary-item__thumb { height: 64px; } }
@media (max-width: 480px) { .photo-summary-item__thumb { height: 48px; } }
.photo-summary-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-summary-item__meta { font-size: var(--font-size-sm); color: var(--color-text); display: block; overflow-wrap: anywhere; }

/* Compact toggle link */
.photo-review-toggle { margin-top: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-primary); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Improved spacing for payment page sections */
.checkout-main .summary-card + .summary-card { 
  margin-top: var(--space-lg); 
}

.checkout-sidebar > * + * { 
  margin-top: var(--space-lg); 
}

/* Better content spacing within cards */
.summary-card__content {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Ensure adequate line spacing for readability */
.summary-card__content p,
.summary-card__content div {
  line-height: 1.6;
}

/* Prevent text overflow in narrow columns */
.summary-card__header {
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.summary-card__title {
  min-width: 0;
  flex: 1;
}

/* Responsive improvements for cards */
@media (min-width: 768px) and (max-width: 1279px) {
  .summary-card {
    padding: 0; /* Reset to control padding per section */
  }
  
  .summary-card__header {
    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg) !important;
  }
  
  .summary-card__content {
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg) !important;
  }
}

@media (min-width: 1280px) {
  .summary-card {
    padding: 0; /* Reset to control padding per section */
  }
  
  .summary-card__header {
    padding: var(--space-xl) var(--space-xl) var(--space-md) var(--space-xl) !important;
  }
  
  .summary-card__content {
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl) !important;
  }
}

/* Ensure payment button area has adequate spacing */
.checkout-sidebar .price-summary,
.checkout-sidebar .summary-card {
  margin-bottom: var(--space-lg);
}

.checkout-sidebar .summary-card:last-child {
  margin-bottom: 0;
}

/* Responsive photo grid improvements */
.photo-review-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

@media (min-width: 768px) and (max-width: 1279px) {
  .photo-review-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
  }
}

@media (min-width: 1280px) {
  .photo-review-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--space-md);
  }
  
  /* Give more space to detailed view */
  .photo-overview {
    display: grid;
    gap: var(--space-lg);
  }
  
  .style-group__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-md);
  }
}

/* Sidebar spacing - handled above in main responsive rules */

/* Payment method compact visuals */
.payment-method { padding: var(--space-sm) var(--space-md) !important; border-width: 1px !important; }
.payment-method__icon { width: 24px !important; height: 24px !important; }
.payment-method__name { font-size: var(--font-size-sm) !important; }
.payment-method__description { font-size: var(--font-size-xs) !important; }

/* New Voucher Card Styles (Payment Page) */
#voucher-section {
  margin-bottom: var(--space-md);
}

#voucher-section .summary-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.voucher-icon {
  font-size: 1.1em;
}

.voucher-form {
  margin: 0;
}

.voucher-input-group {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-bottom: var(--space-sm);
}

.voucher-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
  background: var(--color-background);
}

.voucher-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(32, 41, 84, 0.1);
}

.voucher-input.voucher-loading {
  border-color: var(--color-info);
  background-color: #f8f9fa;
}

.voucher-input.voucher-applied {
  border-color: var(--color-success);
  background-color: #f8fff9;
  color: var(--color-success);
}

.voucher-input.voucher-error {
  border-color: var(--color-danger);
  background-color: #fff8f8;
  animation: shake 0.6s ease-in-out;
}

.voucher-input:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
}

#apply-voucher-btn {
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
}

#apply-voucher-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#apply-voucher-btn.loading {
  background-color: var(--color-info);
  border-color: var(--color-info);
}

#apply-voucher-btn.error {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Voucher Feedback */
.voucher-feedback {
  padding: var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-xs);
  transition: all var(--transition-fast);
}

.voucher-feedback.loading {
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

.voucher-feedback.error {
  background-color: #ffebee;
  color: #d32f2f;
  border: 1px solid #ffcdd2;
}

.voucher-feedback.hidden {
  display: none;
}

/* Voucher Applied State */
.voucher-applied {
  background-color: #f1f8e9;
  border: 1px solid #c5e1a5;
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin-top: var(--space-xs);
  transition: all var(--transition-fast);
}

.voucher-applied__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voucher-applied__icon {
  color: var(--color-success);
  font-weight: bold;
  margin-right: var(--space-xs);
}

.voucher-applied__text {
  color: #2e7d32;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  flex: 1;
}

.voucher-applied__remove {
  background: none;
  border: none;
  color: #666;
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: underline;
}

.voucher-applied__remove:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-danger);
}

/* Price Summary Discount Styling */
.price-summary__row--discount {
  border-top: 1px dashed var(--color-border-light);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  color: var(--color-success);
}

.price-summary__row--discount .price-summary__label {
  font-weight: var(--font-weight-semibold);
}

.price-summary__discount {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.discount-icon {
  margin-right: var(--space-xs);
}

.voucher-code {
  opacity: 0.7;
  font-size: 0.85em;
  margin-left: var(--space-xs);
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-animation {
  animation: shake 0.6s ease-in-out;
}

/* ============ Professional polish for Steps 2–4 ============ */
/* Step 2: Photo Settings */
.photo-settings-content { display: grid; gap: var(--space-lg); }
.style-group-card { background: var(--color-background-primary); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xs); }
.settings-card__header { display:flex; align-items:center; justify-content:space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--border-width) var(--border-style) var(--color-border-light); }
.settings-card__title { margin:0; font-size: var(--font-size-lg); }
.settings-card__content { padding: var(--space-lg); display:grid; gap: var(--space-lg); }
.settings-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-md); }
@media (max-width: 1024px) { .settings-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .settings-grid { grid-template-columns: 1fr; } }
.setting-group { display:grid; gap: var(--space-xs); }
.setting-label { font-size: var(--font-size-sm); color: var(--color-text-light); }
.setting-actions { display:flex; justify-content:flex-end; align-items:center; margin-top:auto; }
@media (max-width: 640px) { .setting-actions .btn { width:100%; } }

/* Step 3: Customer Details */
.customer-form { background: var(--color-background-primary); border: none; border-radius: var(--border-radius-lg); box-shadow: none; }
.customer-form .form-group { margin-bottom: var(--space-md); }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
.form-label { font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--space-xs); display:inline-block; }
.form-label--required::after { content: ' *'; color: #dc3545; }
.form-input, .form-select, .form-textarea { width:100%; min-height:44px; border:2px solid var(--color-border); border-radius: var(--border-radius-md); background: var(--color-background); padding: 10px 12px; font-size: var(--font-size-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-textarea { min-height: 96px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(32,41,84,0.12); }
.form-input.form-input--error, .form-select.form-select--error, .form-textarea.form-textarea--error { border-color:#dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,0.12); }
.form-error { color:#dc3545; font-size: var(--font-size-sm); margin-top: var(--space-xs); display:block; }
.form-help { color: var(--color-text-light); font-size: var(--font-size-sm); margin-top: var(--space-xxs); display:block; }
.form-check { display:grid; grid-template-columns: 20px 1fr; gap: var(--space-sm); align-items:start; padding: var(--space-sm); background: var(--color-background-secondary); border: none; border-radius: var(--border-radius-md); }
.form-checkbox, .form-radio { width:20px; height:20px; }
.form-check-label { line-height:1.4; color: var(--color-text); }
.form-checkboxes { display:grid; gap: var(--space-sm); margin-top: var(--space-sm); }

/* Step 4: Checkout refinements */
.summary-card__badge { background: var(--color-background-secondary); border: var(--border-width) var(--border-style) var(--color-border-light); border-radius: var(--border-radius-full); padding: 2px 8px; font-size: var(--font-size-xs); color: var(--color-text-light); }
.payment-methods { display:grid; gap: var(--space-sm); }
.payment-method { display:grid; grid-template-columns: 24px 1fr; gap: var(--space-md); align-items:center; }
.payment-method__radio input { accent-color: var(--color-primary); }
.payment-method__content { display:flex; align-items:center; gap: var(--space-md); }
.payment-method__icon { width:36px; height:36px; display:grid; place-items:center; }
.timeline { display:grid; gap: var(--space-md); }
.timeline-item { display:grid; grid-template-columns: 24px 1fr; gap: var(--space-md); align-items:start; }
.timeline-item__icon { width:24px; height:24px; display:grid; place-items:center; font-size:18px; }
.timeline-item__title { font-weight: var(--font-weight-semibold); }
.timeline-item__description { color: var(--color-text-light); }

/* ============ MODERN CHECKOUT PAGE DESIGN ============ */

/* Checkout Container - Main wrapper */
.checkout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* Two-Column Grid Layout */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-xxl);
  align-items: start;
}

/* Left Column - Main Content */
.checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Right Column - Payment Sidebar */
.checkout-sidebar {
  position: sticky;
  top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============ MAIN CONTENT SECTIONS ============ */

.checkout-section {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.photo-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  background: var(--color-surface);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-full);
}

.edit-link {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.edit-link:hover {
  background: var(--color-primary);
  color: white;
}

/* Collapsible Customer Section */
.customer-details {
  border: none;
}

.section-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--space-md);
  margin: calc(-1 * var(--space-md));
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-fast);
}

.section-summary:hover {
  background: var(--color-surface);
}

.section-summary::-webkit-details-marker {
  display: none;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.section-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Hide summary preview when details are open to avoid duplication */
.customer-details[open] .section-preview {
  display: none;
}

/* Add space above customer details when expanded */
.customer-details[open] .customer-info-display {
  margin-top: var(--space-md);
}

/* Fix style card button alignment - push buttons to bottom */
.style-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.style-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.style-card__action {
  margin-top: auto;
}

/* Ensure thumbnails appear below the button when present */
.style-card__thumbnails {
  margin-top: var(--space-md);
  order: 10; /* Push thumbnails to the end */
}

/* Maintain consistent footer layout across all steps */
.order-footer__container:has(.order-footer__back[style*="display: none"]) .order-footer__back {
  visibility: hidden; /* Keep space but hide content */
  display: flex !important; /* Override inline style */
}

/* Remove emoji from upload overlay */
.upload-overlay__icon {
  display: none !important;
}

/* Disable dark mode for entire website - force light mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override dark mode with light mode colors */
    --color-background: #ffffff;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f8fafc;
    --color-surface: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-text: #0f172a;
    --color-text-light: #64748b;
    --color-text-muted: #94a3b8;
    --color-primary: #202954;
    --color-primary-light: rgba(32, 41, 84, 0.1);
  }
  
  /* Force light backgrounds for all elements */
  * {
    color-scheme: light !important;
  }
}

.summary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.chevron-icon {
  transition: transform var(--transition-fast);
  color: var(--color-text-light);
}

.customer-details[open] .chevron-icon {
  transform: rotate(180deg);
}

.section-details {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

/* ============ PAYMENT SIDEBAR ============ */

.sidebar-section {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}

.sidebar-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

/* Voucher Section */
.voucher-toggle {
  border: none;
}

.voucher-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  cursor: pointer;
  list-style: none;
  padding: var(--space-sm);
  margin: calc(-1 * var(--space-sm));
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-fast);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.voucher-trigger:hover {
  background: var(--color-surface);
}

.voucher-trigger::-webkit-details-marker {
  display: none;
}

.voucher-icon {
  color: var(--color-primary);
}

.voucher-form {
  margin-top: var(--space-md);
}

.voucher-input-group {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.voucher-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-background);
  color: var(--color-text);
}

.voucher-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(32, 41, 84, 0.1);
}

.voucher-apply-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.voucher-apply-btn:hover {
  background: var(--color-primary-dark);
}

.voucher-success {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: var(--border-radius-md);
}

.voucher-text {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.voucher-remove {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: underline;
}

/* Payment Method Section */
.payment-method {
  position: relative;
}

.payment-radio {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.payment-option {
  display: block;
  padding: var(--space-md);
  border: 2px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-background);
}

.payment-option:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.payment-radio:checked + .payment-option {
  border-color: var(--color-primary);
  background: rgba(32, 41, 84, 0.02);
}

.payment-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.payment-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 32px;
}

.paypal-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.payment-details {
  flex: 1;
}

.payment-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.payment-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Security and Trust Elements */
.security-badge, .delivery-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-sm);
}

.delivery-info:last-child {
  margin-bottom: 0;
}

.security-icon, .delivery-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.security-text, .delivery-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.security-title, .delivery-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.security-subtitle, .delivery-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  line-height: 1.3;
}

/* ============ RESPONSIVE DESIGN ============ */

@media (max-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1fr 350px;
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .checkout-container {
    padding: var(--space-md) var(--space-sm);
  }
  
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .checkout-sidebar {
    position: static;
    order: -1;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .section-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .checkout-section, .sidebar-section {
    padding: var(--space-md);
  }
}

@media (max-width: 480px) {
  .checkout-container {
    padding: var(--space-sm);
  }
  
  .checkout-section, .sidebar-section {
    padding: var(--space-sm);
  }
  
  .section-summary {
    padding: var(--space-sm);
    margin: calc(-1 * var(--space-sm));
  }
  
  .voucher-trigger {
    padding: var(--space-xs);
    margin: calc(-1 * var(--space-xs));
  }
}

/* ============ DARK MODE SUPPORT ============ */

@media (prefers-color-scheme: dark) {
  /* Enhanced dark mode styling for checkout sections */
  .checkout-section, .sidebar-section {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .section-header {
    border-bottom-color: var(--color-border);
  }
  
  .section-summary:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .voucher-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  /* Payment method dark mode */
  .payment-option {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  
  .payment-option:hover {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.05);
  }
  
  .payment-radio:checked + .payment-option {
    border-color: var(--color-primary);
    background: rgba(32, 41, 84, 0.1);
  }
  
  /* Form elements dark mode */
  .voucher-input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
  }
  
  .voucher-input:focus {
    border-color: var(--color-primary);
    background: var(--color-background);
  }
  
  /* Trust elements dark mode */
  .security-badge, .delivery-info {
    background: rgba(255, 255, 255, 0.05);
  }
  
  /* Edit links dark mode */
  .edit-link {
    border-color: var(--color-border);
    color: var(--color-primary);
  }
  
  .edit-link:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
  }
  
  /* Photo count badge dark mode */
  .photo-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
  }
}

/* ============ ENHANCED ORDER SUMMARY STYLING ============ */

.price-summary {
  padding: 0;
}

.price-summary__header {
  display: none; /* Hidden since we use sidebar-title instead */
}

.price-summary__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.price-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  font-size: var(--font-size-sm);
}

.price-summary__row--divider {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
}

.price-summary__row--total {
  border-top: 2px solid var(--color-border-light);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.price-summary__row--discount {
  color: var(--color-success);
}

.price-summary__label {
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.price-summary__value {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.price-summary__total {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

.price-summary__discount {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.price-summary__tier {
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  margin-top: var(--space-md);
}

.price-summary__tier-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  line-height: 1.4;
}

.discount-icon {
  font-style: normal;
}

.voucher-code {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* Enhanced dark mode for pricing */
@media (prefers-color-scheme: dark) {
  .price-summary__tier {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .price-summary__row--divider,
  .price-summary__row--total {
    border-top-color: var(--color-border);
  }
}

/* Review Sections - Clean section headers */
.review-section {
  display: grid;
  gap: var(--space-lg);
}

.review-section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.photo-count {
  background: var(--color-background-secondary);
  color: var(--color-text-light);
  padding: 2px 8px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
}

.edit-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-md);
  transition: background-color var(--transition-fast);
}

.edit-link:hover {
  background-color: var(--color-surface);
}

/* Contact Summary - Single line format */
.contact-summary {
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Customer Information: inline summary in the summary row */
.customer-summary-inline { display: grid; gap: 2px; }
.customer-summary-inline__title { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.customer-summary-inline__info { font-size: var(--font-size-sm); color: var(--color-text-light); }

/* Open panel styling for customer info */
.customer-summary--panel {
  border: var(--border-width) var(--border-style) var(--color-border-light);
  border-top: none;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  background: var(--color-background);
}

.customer-details[open] .customer-summary--panel .contact-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
}

/* Photo Strip - Horizontal thumbnail layout */
.photo-strip {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  scrollbar-width: thin;
  max-width: 100%; /* Prevent expanding beyond container width when lots of photos */
}

.photo-strip::-webkit-scrollbar {
  height: 6px;
}

.photo-strip::-webkit-scrollbar-track {
  background: var(--color-border-light);
  border-radius: 3px;
}

.photo-strip::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.photo-thumbnail {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-md);
  object-fit: cover;
  border: 2px solid var(--color-border-light);
}

/* Process Steps - Modern responsive cards timeline */
.process-steps {
  display: grid;
  gap: var(--space-md);
}

.process-steps--modern {
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .process-steps--modern {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--space-lg);
  }
}

.process-steps--modern .process-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-md);
  align-items: start;
  background: #fff !important; /* light card so black text is visible even in dark theme */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}

.process-steps--modern .process-step:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.process-steps--modern .step-number {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, #3d4b6e, #202954);
  color: #fff;
  border-radius: var(--border-radius-full);
  display: grid;
  place-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 4px 10px rgba(32,41,84,0.2);
}

.process-steps--modern .step-content { display: grid; gap: 4px; }
.process-steps--modern .step-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-base); color: #000; }
.process-steps--modern .step-description { font-size: var(--font-size-sm); color: #000; opacity: 0.9; }
.process-steps--modern .step-icon { color: #202954; opacity: 0.95; }

/* Horizontal connectors on desktop */
@media (min-width: 992px) {
  .process-steps--modern .process-step::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: -16px;
    width: 32px;
    height: 2px;
    background: var(--color-border);
  }
  .process-steps--modern .process-step:last-child::after { display: none; }
}

/* Vertical timeline accent on mobile */
@media (max-width: 991px) {
  .process-steps--modern .process-step { grid-template-columns: 36px 1fr; }
  .process-steps--modern .process-step::before {
    content: '';
    position: absolute;
    left: 18px;
    top: calc(40px + var(--space-sm));
    bottom: var(--space-sm);
    width: 2px;
    background: var(--color-border);
  }
  .process-steps--modern .process-step:last-child::before { display: none; }
}

/* Force readable text per request (targeted to avoid overriding numbers) */
.process-steps--modern .step-title,
.process-steps--modern .step-description { color: #000 !important; }
.process-steps--modern .step-number { color: #fff !important; }
.process-steps--modern .step-title .step-icon { color: #202954 !important; }

/* Hard-enforce colors and visibility at the component scope (counters any late overrides) */
#step-4-content .process-steps.process-steps--modern { visibility: visible !important; }
#step-4-content .process-steps.process-steps--modern * {
  color: #000 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important; /* webkit guard */
}
#step-4-content .process-steps.process-steps--modern .step-number {
  color: #fff !important; /* keep numbers white */
}

/* Ensure visibility of texts within the timeline on all themes */
.process-step .step-content,
.process-step .step-content .step-title,
.process-step .step-content .step-description {
  color: #000 !important; /* Force readable text per request */
}

/* Hard guard refined: ensure correct colors for texts and numbers */
#step-4-content .process-steps .step-title,
#step-4-content .process-steps .step-description { color: #000 !important; }
#step-4-content .process-steps .step-number { color: #fff !important; }


/* Ensure the background contrast is correct */
.review-section .process-steps--modern .process-step {
  background: #ffffff !important;
  color: #000000 !important;
}

/* CRITICAL FIX: Override main.css generic .step-title and .step-description rules */
/* Main.css has these rules that are interfering:
   .step-title { color: var(--color-text); }
   .step-description { color: var(--color-text-light); }
*/

/* Ultra-specific selectors to override main.css rules */
.process-steps--modern .process-step .step-content .step-title,
.process-steps--modern .process-step .step-content .step-description,
#step-4-content .process-steps .process-step .step-content .step-title,
#step-4-content .process-steps .process-step .step-content .step-description,
.review-section .process-steps--modern .process-step .step-content .step-title,
.review-section .process-steps--modern .process-step .step-content .step-description {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
  display: block !important;
  -webkit-text-fill-color: #000000 !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Ensure step-title has proper display */
.process-steps--modern .process-step .step-content .step-title,
#step-4-content .process-steps .process-step .step-content .step-title,
.review-section .process-steps--modern .process-step .step-content .step-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}

/* Ensure step-description has proper display */
.process-steps--modern .process-step .step-content .step-description,
#step-4-content .process-steps .process-step .step-content .step-description,
.review-section .process-steps--modern .process-step .step-content .step-description {
  display: block !important;
  font-size: 14px !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
}

/* Voucher Section - Collapsible design */
.voucher-section {
  border-top: var(--border-width) var(--border-style) var(--color-border-light);
  padding-top: var(--space-lg);
}

.voucher-toggle {
  border: none;
}

.voucher-toggle__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

.voucher-toggle__trigger::-webkit-details-marker {
  display: none;
}

.voucher-form {
  padding-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.voucher-input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs);
}

.voucher-input {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
}

.voucher-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(32, 41, 84, 0.12);
}

.apply-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.apply-btn:hover {
  background: var(--color-primary-dark);
}

.voucher-feedback {
  padding: var(--space-sm);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-xs);
}

.voucher-feedback.success {
  background: #d4edda;
  color: #155724;
}

.voucher-feedback.error {
  background: #f8d7da;
  color: #721c24;
}

.voucher-applied {
  padding: var(--space-sm);
  background: #d4edda;
  border-radius: var(--border-radius-md);
}

.voucher-applied__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voucher-applied__text {
  font-size: var(--font-size-xs);
  color: #155724;
  font-weight: var(--font-weight-medium);
}

.voucher-applied__remove {
  background: none;
  border: none;
  color: #155724;
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-decoration: underline;
}

/* Payment Method - Clean selection */
.payment-method-section {
  border-top: var(--border-width) var(--border-style) var(--color-border-light);
  padding-top: var(--space-lg);
}

.payment-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-md) 0;
}

.payment-methods {
  display: grid;
  gap: var(--space-sm);
}

.payment-method {
  position: relative;
}

.payment-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.payment-method__label {
  display: block;
  padding: var(--space-md);
  border: 2px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-background);
}

.payment-method__label:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.payment-method input[type="radio"]:checked + .payment-method__label {
  border-color: var(--color-primary);
  background: rgba(32, 41, 84, 0.02);
}

.payment-method__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.payment-method__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-method__details {
  flex: 1;
  display: grid;
  gap: 2px;
}

.payment-method__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.payment-method__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin: 0;
}

/* Payment Security - Clean badges */
.payment-security {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
}

.payment-security__icon {
  color: var(--color-text-light);
  flex-shrink: 0;
}

.payment-security__text {
  display: grid;
  gap: 2px;
}

.payment-security__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.payment-security__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-top: var(--space-md);
}

.security-badge svg {
  color: var(--color-text-light);
}

/* Photos Summary - Collapsible photo section */
.photos-summary {
  background: var(--color-background);
  border: var(--border-width) var(--border-style) var(--color-border-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  width: 100%;
}

.photos-details[open] .chevron-icon {
  transform: rotate(180deg);
}

.photos-summary__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  background: var(--color-surface);
  border: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: background-color var(--transition-fast);
  list-style: none;
}

.photos-summary__trigger::-webkit-details-marker {
  display: none;
}

.photos-summary__trigger::marker {
  display: none;
}

.photos-summary__trigger:hover {
  background: rgba(248, 250, 252, 0.8) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.photos-count {
  color: var(--color-text);
}

.chevron-icon {
  transition: transform var(--transition-normal);
  color: var(--color-text-light);
}

.photos-table-container {
  max-height: 70vh; /* Allow taller content like long custom notes */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  border-top: var(--border-width) var(--border-style) var(--color-border-light);
  width: 100%;
  padding-bottom: calc(180px + env(safe-area-inset-bottom)); /* Keep last items clear of fixed footer */
  box-sizing: border-box;
}

/* Simplified expanded view - remove nested scrolling */
.photos-details[open] .photos-table-container {
  max-height: none; /* Remove height restriction */
  overflow-y: visible; /* Remove internal scrolling */
}

/* Simplified spacing for expanded photos */
.photos-details[open] .photos-summary {
  margin-bottom: var(--space-xl);
}

/* Remove mobile height restrictions to prevent double scrollbars */
@media (max-width: 768px) {
  .photos-details[open] .photos-table-container { 
    max-height: none;
    overflow-y: visible;
  }
}

/* Match footer-safe spacing across breakpoints */
@media (max-width: 768px) {
  .photos-table-container {
    padding-bottom: calc(180px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .photos-table-container {
    padding-bottom: calc(220px + env(safe-area-inset-bottom));
  }
}

/* Add a spacer at the end of the list so the last card scrolls fully above the footer */
.photos-list::after {
  content: '';
  display: block;
  height: 200px;
}

@media (max-width: 768px) {
  .photos-list::after { height: 240px; }
}

@media (max-width: 480px) {
  .photos-list::after { height: 280px; }
}

/* Card-based photos list (mobile-first) */
.photos-list {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

@media (min-width: 768px) {
  .photos-list {
    gap: var(--space-md);
    padding: var(--space-md);
  }
}

@media (max-width: 768px) {
  .photos-table-container {
    max-height: 75vh; /* More headroom on mobile */
  }
}

.photos-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border: none;
}

.photos-summary {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Scrollbar styling for photo table */
.photos-table-container::-webkit-scrollbar {
  width: 6px;
}

.photos-table-container::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.photos-table-container::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--border-radius-sm);
}

.photos-table-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light);
}

/* Photos Table - Clean list layout */
.photos-table {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: var(--border-width) var(--border-style) var(--color-border-light);
}

.photos-table__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-background);
}

.photos-table__table th {
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
}

.photos-table__table th:first-child {
  width: 60px;
  padding: var(--space-sm);
}

.photos-table__table th:nth-child(2) {
  width: 40%;
}

.photos-table__table th:nth-child(3) {
  width: 20%;
}

.photos-table__table th:nth-child(4) {
  width: 35%;
}

.photos-table__table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
}

.photos-table__row {
  border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
  transition: background-color var(--transition-fast);
}

.photos-table__row:hover {
  background-color: var(--color-surface);
}

.photos-table__row:last-child {
  border-bottom: none;
}

.photos-table__table td {
  padding: var(--space-md);
  vertical-align: top; /* Ensure top alignment for long settings text */
}

.photos-table__thumbnail {
  width: 60px;
  padding: var(--space-sm) !important;
}

.photos-table__thumbnail img {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-sm);
  object-fit: cover;
  border: var(--border-width) var(--border-style) var(--color-border-light);
}

/* Explicitly ensure top alignment for important columns */
.photos-table__thumbnail,
.photos-table__name,
.photos-table__style,
.photos-table__settings {
  vertical-align: top;
}

.photos-table__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.photos-table__style {
  width: 120px;
}

.style-badge {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  padding: 2px var(--space-sm);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.photos-table__settings {
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.setting-default {
  color: #000; /* Use true black for consistency */
  font-style: italic;
}

.setting-item {
  display: inline-block;
  background: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--color-border-light);
  padding: 1px var(--space-xs);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  color: #000; /* Ensure tag text is black */
  white-space: normal; /* Wrap long custom notes */
  margin: 1px 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .checkout-container {
    padding: 0 var(--space-md);
  }
  
  .payment-panel {
    position: static;
    top: unset;
    box-shadow: var(--shadow-sm);
  }
  
  .voucher-input-group {
    grid-template-columns: 1fr;
  }
  
  .photo-strip {
    padding: var(--space-xs);
  }
  
  .photo-thumbnail {
    width: 44px;
    height: 44px;
  }

  /* Stack table on mobile */
  .photos-table__table,
  .photos-table__table thead,
  .photos-table__table tbody,
  .photos-table__table th,
  .photos-table__table td,
  .photos-table__table tr {
    display: block;
  }
  
  .photos-table__table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .photos-table__row {
    border: var(--border-width) var(--border-style) var(--color-border-light);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
  }
  
  .photos-table__row:hover {
    background-color: var(--color-background);
  }
  
  .photos-table__table td {
    border: none;
    border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
    position: relative;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 25%;
  }
  
  .photos-table__table td:before {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    width: 20%;
    padding-right: var(--space-sm);
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
  }
  
  .photos-table__thumbnail:before { content: "Photo"; }
  .photos-table__name:before { content: "Name"; }  
  .photos-table__style:before { content: "Style"; }
  .photos-table__settings:before { content: "Settings"; }
}