/* ================================================================
   SNM BOOKING FORM — Frontend Styles
   Design: Deep crimson/magenta booking form — exact match
================================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
#snm-booking-wrap {
    --snm-crimson:      #8C1B4A;
    --snm-crimson-dark: #6D1238;
    --snm-crimson-deep: #5A0E2F;
    --snm-navy:         #1B2A4A;
    --snm-navy-dark:    #0F1D35;
    --snm-white:        #FFFFFF;
    --snm-white-10:     rgba(255,255,255,0.10);
    --snm-white-20:     rgba(255,255,255,0.20);
    --snm-white-30:     rgba(255,255,255,0.30);
    --snm-white-60:     rgba(255,255,255,0.60);
    --snm-white-80:     rgba(255,255,255,0.80);
    --snm-border:       rgba(255,255,255,0.25);
    --snm-radius:       12px;
    --snm-radius-sm:    8px;
    --snm-radius-xs:    6px;
    --snm-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.snm-booking-wrap {
    font-family:   var(--snm-font);
    max-width:     900px;
    margin:        0 auto;
    border-radius: var(--snm-radius);
    overflow:      hidden;
    box-shadow:    0 8px 40px rgba(0,0,0,0.18);
}

/* ── Step Progress Bar ────────────────────────────────────── */
.snm-steps-bar {
    display:          flex;
    background:       var(--snm-crimson-dark);
    border-bottom:    1px solid var(--snm-white-10);
}

.snm-step {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            6px;
    padding:        14px 8px;
    color:          var(--snm-white-60);
    cursor:         default;
    transition:     all 0.2s;
    position:       relative;
}

.snm-step:not(:last-child)::after {
    content:    '';
    position:   absolute;
    right:      0;
    top:        20%;
    height:     60%;
    width:      1px;
    background: var(--snm-white-10);
}

.snm-step-icon {
    display:     flex;
    align-items: center;
    opacity:     0.6;
    transition:  opacity 0.2s;
}

.snm-step-label {
    font-size:   11px;
    font-weight: 500;
    text-align:  center;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.snm-step.active {
    color: var(--snm-white);
}
.snm-step.active .snm-step-icon {
    opacity: 1;
}
.snm-step.active .snm-step-label {
    font-weight: 700;
}
.snm-step.done .snm-step-icon {
    opacity: 0.8;
}
.snm-step.done .snm-step-label {
    color: var(--snm-white-80);
}

/* Underline indicator for active step */
.snm-step.active::before {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       10%;
    width:      80%;
    height:     3px;
    background: var(--snm-white);
    border-radius: 2px 2px 0 0;
}

/* ── Step Panel (content area) ────────────────────────────── */
.snm-step-panel {
    background: var(--snm-crimson);
    min-height: 440px;
    display:    flex;
    flex-direction: column;
}

.snm-step-inner {
    flex:    1;
    padding: 28px 28px 20px;
}

/* ── Panel Title ──────────────────────────────────────────── */
.snm-panel-title {
    color:       var(--snm-white);
    font-size:   20px;
    font-weight: 700;
    margin:      0 0 20px;
    letter-spacing: -0.01em;
}

/* ── Filter Tabs ──────────────────────────────────────────── */
.snm-filter-tabs {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 22px;
}

.snm-filter-btn {
    padding:      6px 16px;
    border-radius: 50px;
    font-size:    13px;
    font-weight:  600;
    cursor:       pointer;
    transition:   all 0.2s;
    border:       2px solid var(--snm-white-30);
    background:   transparent;
    color:        var(--snm-white-80);
    font-family:  var(--snm-font);
    line-height:  1.4;
}

.snm-filter-btn:hover {
    border-color: var(--snm-white-60);
    color:        var(--snm-white);
}

.snm-filter-btn.active {
    background:   var(--snm-navy);
    border-color: var(--snm-navy);
    color:        var(--snm-white);
}

/* ── Service Group Heading ────────────────────────────────── */
.snm-group-title {
    color:       var(--snm-white);
    font-size:   15px;
    font-weight: 700;
    margin:      0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--snm-white-20);
}

/* ── Service Cards Grid ───────────────────────────────────── */
.snm-cards-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         20px;
}

@media (max-width: 600px) {
    .snm-cards-grid { grid-template-columns: 1fr; }
}

/* ── Individual Service Card ──────────────────────────────── */
.snm-card {
    background:    var(--snm-white);
    border-radius: var(--snm-radius-sm);
    padding:       14px;
    cursor:        pointer;
    transition:    all 0.2s;
    border:        2px solid transparent;
    position:      relative;
    display:       flex;
    flex-direction: column;
    gap:           8px;
}

.snm-card:hover {
    border-color: var(--snm-crimson-dark);
    box-shadow:   0 4px 16px rgba(0,0,0,0.15);
    transform:    translateY(-1px);
}

.snm-card.selected {
    border-color: var(--snm-navy);
    box-shadow:   0 4px 16px rgba(0,0,0,0.2);
}

/* Card header: thumbnail + title */
.snm-card-head {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

.snm-card-thumb {
    width:         52px;
    height:        52px;
    border-radius: var(--snm-radius-xs);
    object-fit:    cover;
    flex-shrink:   0;
    background:    #f0f0f0;
}

.snm-card-thumb-placeholder {
    width:         52px;
    height:        52px;
    border-radius: var(--snm-radius-xs);
    background:    #e8e8e8;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #aaa;
    font-size:     20px;
}

.snm-card-info { flex: 1; }

.snm-card-title {
    font-size:   13.5px;
    font-weight: 700;
    color:       #1a1a2e;
    margin:      0 0 4px;
    line-height: 1.3;
}

.snm-card-desc {
    font-size:   11.5px;
    color:       #555;
    line-height: 1.55;
    margin:      0;
}

/* Price row */
.snm-card-price-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  auto;
}

.snm-card-price-label {
    font-size:  12px;
    color:      #666;
    font-weight: 500;
}

.snm-price-badge {
    background:    var(--snm-navy);
    color:         var(--snm-white);
    font-size:     12px;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 50px;
    letter-spacing: 0.01em;
}

/* Selected tick overlay */
.snm-card-check {
    position:      absolute;
    top:           10px;
    right:         10px;
    width:         24px;
    height:        24px;
    background:    #27ae60;
    border-radius: 50%;
    display:       none;
    align-items:   center;
    justify-content: center;
}
.snm-card-check svg { color: white; }
.snm-card.selected .snm-card-check { display: flex; }

/* ── Options Expand Panel ─────────────────────────────────── */
.snm-options-expand {
    background:    var(--snm-crimson-dark);
    border-radius: var(--snm-radius-sm);
    padding:       20px;
    margin-bottom: 16px;
    border:        1px solid var(--snm-white-20);
}

.snm-option-row {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       10px 0;
    border-bottom: 1px solid var(--snm-white-10);
}

.snm-option-row:last-child { border-bottom: none; }

.snm-option-label {
    color:       var(--snm-white);
    font-size:   14px;
    font-weight: 600;
}

/* Dropdown selector in options */
.snm-option-select {
    appearance:    none;
    background:    var(--snm-crimson);
    border:        1px solid var(--snm-white-30);
    border-radius: var(--snm-radius-xs);
    color:         var(--snm-white);
    font-size:     13px;
    font-weight:   600;
    padding:       8px 32px 8px 12px;
    cursor:        pointer;
    min-width:     160px;
    font-family:   var(--snm-font);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
}

.snm-option-select option { background: var(--snm-crimson-dark); color: white; }

/* Unit counter */
.snm-unit-counter {
    display:     flex;
    align-items: center;
    gap:         0;
    border:      1px solid var(--snm-white-30);
    border-radius: var(--snm-radius-xs);
    overflow:    hidden;
}

.snm-unit-btn {
    background:  var(--snm-crimson);
    border:      none;
    color:       var(--snm-white);
    width:       34px;
    height:      36px;
    font-size:   18px;
    cursor:      pointer;
    transition:  background 0.15s;
    font-weight: 600;
    line-height: 1;
    display:     flex;
    align-items: center;
    justify-content: center;
}
.snm-unit-btn:hover { background: var(--snm-crimson-deep); }

.snm-unit-val {
    color:       var(--snm-white);
    font-weight: 700;
    font-size:   14px;
    min-width:   48px;
    text-align:  center;
    background:  var(--snm-crimson-dark);
    height:      36px;
    line-height: 36px;
}

/* Add-on row */
.snm-addon-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 0;
    border-bottom: 1px solid var(--snm-white-10);
}

.snm-addon-check-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1;
}

.snm-addon-checkbox {
    width:  18px;
    height: 18px;
    accent-color: var(--snm-navy);
    cursor: pointer;
}

.snm-addon-name {
    color:       var(--snm-white);
    font-size:   13px;
    font-weight: 500;
    cursor:      pointer;
}

.snm-addon-price {
    color:       var(--snm-white);
    font-weight: 700;
    font-size:   13px;
    min-width:   40px;
}

.snm-addon-counter {
    opacity: 0.4;
    transition: opacity 0.2s;
}
.snm-addon-counter.active { opacity: 1; }

/* ── Step 1 Bottom Bar ────────────────────────────────────── */
.snm-step1-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     16px;
    border-top:      1px solid var(--snm-white-20);
    margin-top:      8px;
}

.snm-step1-actions {
    display: flex;
    gap:     10px;
}

/* ── Step Footer (nav buttons) ────────────────────────────── */
.snm-step-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 28px 20px;
    border-top:      1px solid var(--snm-white-20);
    background:      var(--snm-crimson);
}

/* ── Buttons ──────────────────────────────────────────────── */
.snm-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-family:    var(--snm-font);
    font-weight:    600;
    font-size:      14px;
    line-height:    1;
    padding:        10px 20px;
    border-radius:  var(--snm-radius-xs);
    cursor:         pointer;
    transition:     all 0.2s;
    border:         2px solid transparent;
    text-decoration: none;
    white-space:    nowrap;
}

/* CTA (dark navy) */
.snm-btn-cta {
    background:  var(--snm-navy);
    color:       var(--snm-white);
    border-color: var(--snm-navy);
}
.snm-btn-cta:hover {
    background:  var(--snm-navy-dark);
    border-color: var(--snm-navy-dark);
}
.snm-btn-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ghost (white transparent) */
.snm-btn-ghost {
    background:  transparent;
    color:       var(--snm-white-80);
    border-color: transparent;
}
.snm-btn-ghost:hover {
    color:       var(--snm-white);
    background:  var(--snm-white-10);
}

/* Outlined light */
.snm-btn-outline-light {
    background:  transparent;
    color:       var(--snm-white);
    border-color: var(--snm-white-30);
}
.snm-btn-outline-light:hover {
    background:  var(--snm-white-10);
    border-color: var(--snm-white-60);
}

/* Spinner inside button */
.snm-btn-spinner {
    width:        14px;
    height:       14px;
    border:       2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation:   snm-spin 0.6s linear infinite;
    margin-left:  4px;
}

/* ── Step 2: Customer Form Fields ─────────────────────────── */
.snm-form-fields {
    display:        flex;
    flex-direction: column;
    gap:            18px;
}

.snm-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.snm-label {
    color:       var(--snm-white);
    font-size:   13.5px;
    font-weight: 600;
    display:     block;
}

.snm-req { color: #ff9999; }

.snm-input {
    background:    rgba(255,255,255,0.08);
    border:        1.5px solid var(--snm-border);
    border-radius: var(--snm-radius-xs);
    color:         var(--snm-white);
    font-size:     15px;
    font-family:   var(--snm-font);
    padding:       12px 14px;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color 0.2s, background 0.2s;
    outline:       none;
}

.snm-input::placeholder { color: var(--snm-white-30); }

.snm-input:focus {
    border-color: var(--snm-white-60);
    background:   rgba(255,255,255,0.12);
}

.snm-input.error { border-color: #ff6b6b; }

.snm-textarea {
    resize:      vertical;
    min-height:  120px;
    line-height: 1.6;
}

.snm-field-err {
    color:     #ff9999;
    font-size: 12px;
    font-weight: 500;
}

/* ── Step 3: Cart ─────────────────────────────────────────── */
.snm-cart-inner { padding: 20px 28px; }

.snm-cart-header-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.snm-cart-title-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.snm-cart-badge {
    background:    var(--snm-navy);
    color:         var(--snm-white);
    font-size:     11px;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 50px;
}

.snm-cart-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-bottom:  20px;
}

/* Cart item row */
.snm-cart-item {
    padding:       16px 0;
    border-bottom: 1px solid var(--snm-white-20);
}

.snm-cart-item-top {
    display:         flex;
    align-items:     center;
    gap:             12px;
    justify-content: space-between;
}

.snm-cart-item-left {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex:        1;
}

.snm-cart-item-remove {
    background:  transparent;
    border:      none;
    color:       var(--snm-white-60);
    cursor:      pointer;
    padding:     4px;
    border-radius: 50%;
    transition:  all 0.2s;
    display:     flex;
    align-items: center;
}
.snm-cart-item-remove:hover {
    color:       #ff9999;
    background:  rgba(255,100,100,0.1);
}

.snm-cart-thumb {
    width:         46px;
    height:        46px;
    border-radius: var(--snm-radius-xs);
    object-fit:    cover;
    background:    var(--snm-white-10);
    flex-shrink:   0;
}

.snm-cart-item-name {
    color:       var(--snm-white);
    font-size:   14px;
    font-weight: 600;
    flex:        1;
}

.snm-cart-item-price {
    color:       var(--snm-white);
    font-weight: 700;
    font-size:   15px;
    white-space: nowrap;
}

/* Cart item detail tags */
.snm-cart-item-details {
    display:   flex;
    gap:       24px;
    padding:   10px 0 0 58px;
    flex-wrap: wrap;
}

.snm-cart-detail-col {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    position:       relative;
}

.snm-cart-detail-col:not(:last-child)::after {
    content:    '';
    position:   absolute;
    right:      -12px;
    top:        10%;
    height:     80%;
    width:      1px;
    background: var(--snm-white-20);
}

.snm-cart-detail-key {
    color:     var(--snm-white-60);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.snm-cart-detail-val {
    color:       var(--snm-white);
    font-size:   13px;
    font-weight: 600;
}

/* Grand total row */
.snm-cart-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         16px 0 0;
    border-top:      1px solid var(--snm-white-30);
}

.snm-cart-total-row > span:first-child {
    color:       var(--snm-white);
    font-size:   15px;
    font-weight: 700;
}

#snm-grand-total {
    color:       var(--snm-white);
    font-size:   18px;
    font-weight: 700;
}

/* ── Step 4: Overview Grid ────────────────────────────────── */
.snm-overview-grid {
    display:    flex;
    flex-direction: column;
    gap:        0;
    margin-bottom: 24px;
}

.snm-overview-section {
    margin-bottom: 20px;
}

.snm-section-subtitle {
    color:         var(--snm-white);
    font-size:     15px;
    font-weight:   700;
    margin:        0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--snm-white-20);
}

.snm-overview-row {
    display:         flex;
    gap:             12px;
    padding:         8px 0;
    border-bottom:   1px solid var(--snm-white-10);
}

.snm-overview-row:last-child { border-bottom: none; }

.snm-overview-key {
    color:      var(--snm-white-60);
    font-size:  13px;
    min-width:  130px;
    flex-shrink: 0;
}

.snm-overview-val {
    color:       var(--snm-white);
    font-size:   13px;
    font-weight: 500;
}

.snm-overview-total-row {
    display:         flex;
    justify-content: space-between;
    padding:         14px 0;
    border-top:      2px solid var(--snm-white-30);
    margin-top:      8px;
}

.snm-overview-total-row span {
    color:       var(--snm-white);
    font-size:   16px;
    font-weight: 700;
}

/* ── Stripe Payment Element ───────────────────────────────── */
.snm-payment-wrap {
    background:    var(--snm-crimson-dark);
    border-radius: var(--snm-radius-sm);
    padding:       20px;
    margin-bottom: 20px;
    border:        1px solid var(--snm-white-20);
}

.snm-stripe-element {
    background:    rgba(255,255,255,0.08);
    border:        1.5px solid var(--snm-border);
    border-radius: var(--snm-radius-xs);
    padding:       14px;
    min-height:    44px;
}

.snm-error-msg {
    color:      #ff9999;
    font-size:  13px;
    margin-top: 8px;
    font-weight: 500;
}

/* ── Success Screen ───────────────────────────────────────── */
.snm-success-wrap {
    text-align:    center;
    padding:       40px 20px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           12px;
}

.snm-success-check {
    width:  72px;
    height: 72px;
    color:  #4ade80;
    margin-bottom: 8px;
    animation: snm-pop 0.4s ease;
}

.snm-success-wrap h2 {
    color:       var(--snm-white);
    font-size:   26px;
    font-weight: 700;
    margin:      0;
}

.snm-success-ref {
    color:     var(--snm-white);
    font-size: 15px;
    margin:    0;
}

.snm-success-wrap p {
    color:      var(--snm-white-80);
    font-size:  14px;
    margin:     0;
    max-width:  400px;
}

.snm-success-sub {
    color:      var(--snm-white-60) !important;
    font-size:  13px !important;
}

.snm-success-contact {
    font-size: 13px !important;
}

.snm-success-contact a {
    color: var(--snm-white-80);
    text-decoration: underline;
}

/* ── Loading States ───────────────────────────────────────── */
.snm-spinner {
    text-align: center;
    padding:    60px 20px;
    color:      var(--snm-white-60);
    font-size:  14px;
}

.snm-spin-ring {
    width:        40px;
    height:       40px;
    border:       3px solid var(--snm-white-20);
    border-top-color: var(--snm-white);
    border-radius: 50%;
    margin:       0 auto 12px;
    animation:    snm-spin 0.8s linear infinite;
}

.snm-loading-bar {
    height:     32px;
    background: var(--snm-white-10);
    border-radius: 50px;
    width:      300px;
    animation:  snm-pulse 1.2s ease-in-out infinite;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes snm-spin {
    to { transform: rotate(360deg); }
}

@keyframes snm-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.7; }
}

@keyframes snm-pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes snm-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.snm-animate-in {
    animation: snm-fadein 0.3s ease forwards;
}

/* ── No-services message ──────────────────────────────────── */
.snm-no-services {
    color:      var(--snm-white-60);
    text-align: center;
    padding:    40px;
    font-size:  14px;
}

/* ── Scrollbar (webkit) ───────────────────────────────────── */
.snm-booking-wrap *::-webkit-scrollbar { width: 4px; height: 4px; }
.snm-booking-wrap *::-webkit-scrollbar-track { background: var(--snm-white-10); }
.snm-booking-wrap *::-webkit-scrollbar-thumb { background: var(--snm-white-30); border-radius: 4px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .snm-step-label { font-size: 9px; }
    .snm-step-inner, .snm-cart-inner { padding: 18px 16px; }
    .snm-step-footer  { padding: 14px 16px; }
    .snm-step1-bar    { flex-direction: column; gap: 12px; }
    .snm-step1-actions { width: 100%; justify-content: flex-end; }
    .snm-option-row   { flex-direction: column; align-items: flex-start; gap: 8px; }
    .snm-cart-item-details { padding-left: 0; }
    .snm-cart-detail-col::after { display: none; }
    .snm-panel-title  { font-size: 17px; }
    .snm-btn          { font-size: 13px; padding: 9px 14px; }
}