/* ==========================================================
   StyleYaSelf Ad Manager — Frontend Vendor Dashboard CSS
   Premium SaaS-like interface for vendor ad booking
   ========================================================== */

:root {
    --syam-primary:   #f97316;
    --syam-secondary: #fb923c;
    --syam-success:   #10b981;
    --syam-warning:   #f59e0b;
    --syam-danger:    #ef4444;
    --syam-dark:      #1e1b4b;
    --syam-gray:      #6b7280;
    --syam-light-bg:  #fff5f0;
    --syam-border:    #e5e7eb;
    --syam-radius:    16px;
    --syam-radius-sm: 10px;
    --syam-shadow:    0 4px 24px rgba(249,115,22,0.10);
    --syam-shadow-lg: 0 8px 40px rgba(249,115,22,0.18);
    --syam-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.syam-vendor-wrap * { box-sizing: border-box; }

.syam-vendor-wrap {
    font-family: var(--syam-font);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
    color: var(--syam-dark);
}

/* ====================================================
   HEADER
   ==================================================== */
.syam-vendor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--syam-dark) 0%, var(--syam-primary) 60%, var(--syam-secondary) 100%);
    border-radius: var(--syam-radius);
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.syam-vendor-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    pointer-events: none;
}
.syam-vendor-welcome { display: flex; align-items: center; gap: 16px; }
.syam-vendor-welcome .syam-vendor-avatar img { border-radius: 50%; border: 3px solid rgba(255,255,255,0.3); }
.syam-vendor-welcome h1 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 4px;
    font-weight: 700;
}
.syam-vendor-welcome p { color: rgba(255,255,255,0.75); margin: 0; font-size: 14px; }

.syam-vendor-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.syam-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.syam-nav-link:hover, .syam-nav-link.active {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.syam-nav-badge {
    background: var(--syam-warning);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ====================================================
   VENDOR STATS
   ==================================================== */
.syam-vendor-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.syam-vendor-stat {
    background: #fff;
    border-radius: var(--syam-radius-sm);
    padding: 16px 20px;
    text-align: center;
    box-shadow: var(--syam-shadow);
    border: 1px solid var(--syam-border);
}
.syam-vendor-stat-num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--syam-primary);
    line-height: 1;
}
.syam-vendor-stat-label {
    display: block;
    font-size: 12px;
    color: var(--syam-gray);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ====================================================
   SECTION TITLES
   ==================================================== */
.syam-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 32px;
}
.syam-section-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--syam-dark);
    margin: 0 0 4px;
}
.syam-section-title p { color: var(--syam-gray); font-size: 14px; margin: 0; }
.syam-link-all { color: var(--syam-primary); text-decoration: none; font-size: 14px; font-weight: 500; }
.syam-link-all:hover { text-decoration: underline; }

/* ====================================================
   AD TYPES GRID
   ==================================================== */
.syam-ad-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.syam-ad-type-card {
    background: #fff;
    border-radius: var(--syam-radius);
    box-shadow: var(--syam-shadow);
    border: 1px solid var(--syam-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s;
    position: relative;
}
.syam-ad-type-card:hover {
    box-shadow: var(--syam-shadow-lg);
    transform: translateY(-4px);
}
.syam-ad-type-card.syam-disabled { opacity: 0.5; pointer-events: none; }

.syam-ad-card-accent {
    height: 5px;
    width: 100%;
}
.syam-ad-card-icon {
    font-size: 36px;
    padding: 20px 20px 0;
    line-height: 1;
}
.syam-ad-card-body { padding: 16px 20px; flex: 1; }
.syam-ad-card-body h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--syam-dark); }
.syam-ad-card-body p { font-size: 13px; color: var(--syam-gray); margin: 0 0 12px; line-height: 1.5; }

.syam-requirements {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.syam-req-item {
    font-size: 11px;
    color: var(--syam-gray);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.syam-req-check { color: var(--syam-success); font-weight: 700; flex-shrink: 0; }

.syam-ad-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.syam-meta-chip {
    display: flex;
    flex-direction: column;
    background: var(--syam-light-bg);
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid var(--syam-border);
}
.syam-chip-label { font-size: 10px; text-transform: uppercase; color: var(--syam-gray); letter-spacing: 0.5px; }
.syam-chip-val { font-size: 12px; font-weight: 600; color: var(--syam-dark); margin-top: 1px; }
.syam-chip-available .syam-chip-val { color: var(--syam-success); }
.syam-chip-full .syam-chip-val { color: var(--syam-danger); }

.syam-pricing { display: flex; align-items: baseline; gap: 6px; }
.syam-price-from { font-size: 20px; font-weight: 700; color: var(--syam-primary); }
.syam-price-unit { font-size: 12px; color: var(--syam-gray); }

.syam-store-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.syam-ad-card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--syam-border);
    background: #fafafe;
}

/* ====================================================
   BUTTONS
   ==================================================== */
.syam-btn-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--syam-primary), var(--syam-secondary));
    color: #fff;
    border-radius: var(--syam-radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}
.syam-btn-book:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }
.syam-btn-book.syam-btn-waitlist {
    background: none;
    border: 2px solid var(--syam-primary);
    color: var(--syam-primary);
}
.syam-btn-book.syam-btn-waitlist:hover { background: var(--syam-primary); color: #fff; }
.syam-btn-disabled {
    display: block;
    text-align: center;
    padding: 12px;
    color: var(--syam-gray);
    font-size: 13px;
    font-style: italic;
}

.syam-btn-primary-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--syam-primary), var(--syam-secondary));
    color: #fff;
    border: none;
    border-radius: var(--syam-radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.syam-btn-primary-large:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }
.syam-btn-primary-large:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.syam-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: #f3f4f6;
    color: var(--syam-dark);
    border: 1px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.syam-btn-back:hover { background: #e9eaf0; }

.syam-btn-sm-primary {
    padding: 7px 14px;
    background: var(--syam-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}
.syam-btn-sm-outline {
    padding: 7px 14px;
    background: transparent;
    color: var(--syam-primary);
    border: 1px solid var(--syam-primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}
.syam-btn-sm-outline:hover { background: var(--syam-primary); color: #fff; }

/* ====================================================
   BOOKING FORM (MULTI-STEP)
   ==================================================== */
.syam-booking-header {
    margin-bottom: 24px;
}
.syam-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--syam-gray);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 16px;
    transition: color 0.2s;
}
.syam-back-link:hover { color: var(--syam-primary); }
.syam-booking-title {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-radius: var(--syam-radius);
    box-shadow: var(--syam-shadow);
    border: 1px solid var(--syam-border);
}
.syam-booking-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.syam-booking-title h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.syam-booking-title p { color: var(--syam-gray); font-size: 14px; margin: 0; }

/* Step Progress */
.syam-steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.syam-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.syam-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: var(--syam-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.2s;
}
.syam-step.active .syam-step-num { background: var(--syam-primary); color: #fff; }
.syam-step.completed .syam-step-num { background: var(--syam-success); color: #fff; }
.syam-step-label { font-size: 13px; color: var(--syam-gray); font-weight: 500; }
.syam-step.active .syam-step-label { color: var(--syam-primary); }
.syam-step.completed .syam-step-label { color: var(--syam-success); }
.syam-step-connector {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 8px;
    min-width: 24px;
    transition: background 0.2s;
}
.syam-step-connector.active { background: var(--syam-primary); }

.syam-step-panel {
    background: #fff;
    border-radius: var(--syam-radius);
    box-shadow: var(--syam-shadow);
    border: 1px solid var(--syam-border);
    overflow: hidden;
}
.syam-step-panel-inner { padding: 28px; }
.syam-step-panel h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.syam-step-desc { color: var(--syam-gray); font-size: 14px; margin-bottom: 24px; }

/* Date Picker */
.syam-date-picker-wrap {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.syam-date-field { display: flex; flex-direction: column; gap: 6px; }
.syam-date-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--syam-gray); letter-spacing: 0.5px; }
.syam-date-input {
    padding: 11px 14px;
    border: 2px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    font-size: 14px;
    color: var(--syam-dark);
    width: 180px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s;
}
.syam-date-input:focus { outline: none; border-color: var(--syam-primary); }
.syam-date-separator { color: var(--syam-gray); font-size: 18px; margin-bottom: 10px; }

/* Calendar */
.syam-calendar-wrap {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--syam-light-bg);
    border-radius: var(--syam-radius-sm);
    border: 1px solid var(--syam-border);
}
.syam-calendar-wrap h3 { font-size: 14px; margin: 0 0 12px; color: var(--syam-dark); }
.syam-calendar-legend { display: flex; gap: 16px; margin-bottom: 12px; }
.syam-calendar-legend span {
    font-size: 12px;
    color: var(--syam-gray);
    display: flex;
    align-items: center;
    gap: 6px;
}
.syam-calendar-legend span::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.syam-legend-available::before { background: #d1fae5; border: 1px solid #10b981; }
.syam-legend-partial::before   { background: #fef3c7; border: 1px solid #f59e0b; }
.syam-legend-full::before      { background: #fee2e2; border: 1px solid #ef4444; }

.syam-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.syam-cal-day {
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
}
.syam-cal-day.syam-cal-header { font-size: 10px; text-transform: uppercase; color: var(--syam-gray); background: none; }
.syam-cal-available { background: #d1fae5; color: #065f46; border-color: #10b981; }
.syam-cal-partial   { background: #fef3c7; color: #78350f; border-color: #f59e0b; }
.syam-cal-full      { background: #fee2e2; color: #7f1d1d; border-color: #ef4444; text-decoration: line-through; }
.syam-cal-past      { background: #f3f4f6; color: #d1d5db; }
.syam-cal-empty     { background: transparent; border: none; }

/* Slot Selection */
.syam-dates-summary {
    padding: 12px 16px;
    background: var(--syam-light-bg);
    border-radius: var(--syam-radius-sm);
    border: 1px solid var(--syam-border);
    font-size: 14px;
    margin-bottom: 20px;
    color: var(--syam-dark);
}

.syam-slots-container { margin-bottom: 20px; }
.syam-slot-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 2px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}
.syam-slot-item:hover { border-color: var(--syam-primary); background: #f8f7ff; }
.syam-slot-item.selected { border-color: var(--syam-primary); background: #f0f0fe; }
.syam-slot-item.unavailable { opacity: 0.45; cursor: not-allowed; background: #f9fafb; }

.syam-slot-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--syam-border);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.selected .syam-slot-check { background: var(--syam-primary); border-color: var(--syam-primary); color: #fff; }
.syam-slot-check::after { content: ''; }
.selected .syam-slot-check::after { content: '\2713'; font-size: 13px; font-weight: 700; }

.syam-slot-info { flex: 1; }
.syam-slot-name { font-size: 14px; font-weight: 600; color: var(--syam-dark); display: block; }
.syam-slot-dims { font-size: 12px; color: var(--syam-gray); }
.syam-slot-type-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.syam-slot-type-standard { background: #e0e7ff; color: #4338ca; }
.syam-slot-type-premium   { background: #fef3c7; color: #b45309; }
.syam-slot-type-portrait  { background: #d1fae5; color: #065f46; }
.syam-slot-tag-unavailable { background: #fee2e2; color: #7f1d1d; }
.syam-slot-price { font-size: 15px; font-weight: 700; color: var(--syam-primary); }

/* Price Preview */
.syam-price-preview {
    background: linear-gradient(135deg, var(--syam-dark), var(--syam-primary));
    color: #fff;
    border-radius: var(--syam-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}
.syam-price-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.syam-price-row:last-child { border-bottom: none; }
.syam-price-total { padding-top: 12px; margin-top: 4px; }
.syam-price-total span { font-size: 18px; font-weight: 700; }

/* Step Actions */
.syam-step-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--syam-border);
}

/* ====================================================
   SUBMISSION FORMS
   ==================================================== */
.syam-form-group {
    margin-bottom: 20px;
}
.syam-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--syam-dark);
    margin-bottom: 6px;
}
.syam-form-label .syam-required { color: var(--syam-danger); margin-left: 2px; }
.syam-form-desc { font-size: 12px; color: var(--syam-gray); margin-top: 4px; }
.syam-input,
.syam-textarea,
.syam-select {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    font-size: 14px;
    color: var(--syam-dark);
    background: #fff;
    transition: border-color 0.2s;
    font-family: var(--syam-font);
}
.syam-input:focus, .syam-textarea:focus, .syam-select:focus {
    outline: none;
    border-color: var(--syam-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.syam-textarea { min-height: 100px; resize: vertical; }

.syam-upload-area {
    border: 2px dashed var(--syam-border);
    border-radius: var(--syam-radius-sm);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--syam-light-bg);
    position: relative;
}
.syam-upload-area:hover { border-color: var(--syam-primary); background: #f0f0fe; }
.syam-upload-area.dragover { border-color: var(--syam-primary); background: #f0f0fe; }
.syam-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.syam-upload-icon { font-size: 32px; margin-bottom: 8px; }
.syam-upload-text { font-size: 13px; color: var(--syam-gray); }
.syam-upload-hint { font-size: 11px; color: var(--syam-gray); margin-top: 4px; }
.syam-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.syam-upload-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--syam-border);
}
.syam-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.syam-upload-thumb .syam-remove-img {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: var(--syam-danger);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.syam-uploading { font-size: 12px; color: var(--syam-gray); margin-top: 4px; }

/* Product URL list */
.syam-product-list { display: flex; flex-direction: column; gap: 10px; }
.syam-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    background: #fff;
}
.syam-product-num {
    width: 28px;
    height: 28px;
    background: var(--syam-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.syam-product-item .syam-input { margin: 0; }

/* Hotspot mapping */
.syam-hotspot-list { display: flex; flex-direction: column; gap: 10px; }
.syam-hotspot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--syam-light-bg);
    border-radius: var(--syam-radius-sm);
    border: 1px solid var(--syam-border);
}
.syam-hotspot-num {
    width: 28px;
    height: 28px;
    background: var(--syam-secondary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.syam-add-hotspot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed var(--syam-primary);
    color: var(--syam-primary);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.syam-add-hotspot:hover { background: var(--syam-primary); color: #fff; }

/* Checkboxes grid */
.syam-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.syam-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--syam-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.syam-checkbox-item:hover { border-color: var(--syam-primary); background: #f8f7ff; }
.syam-checkbox-item input:checked + span { color: var(--syam-primary); font-weight: 600; }

/* Requirements Box */
.syam-requirements-box {
    background: #f0f0fe;
    border: 1px solid #c7d2fe;
    border-radius: var(--syam-radius-sm);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.syam-requirements-box strong { font-size: 13px; color: var(--syam-primary); display: block; margin-bottom: 8px; }
.syam-requirements-box ul { margin: 0; padding-left: 16px; }
.syam-requirements-box li { font-size: 13px; color: var(--syam-dark); margin-bottom: 4px; }

/* ====================================================
   REVIEW CARD
   ==================================================== */
.syam-review-card {
    background: var(--syam-light-bg);
    border-radius: var(--syam-radius);
    padding: 24px;
    border: 1px solid var(--syam-border);
    margin-bottom: 20px;
}
.syam-review-card h3 { font-size: 16px; margin: 0 0 16px; color: var(--syam-dark); }
.syam-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.syam-review-item label { display: block; font-size: 11px; text-transform: uppercase; color: var(--syam-gray); letter-spacing: 0.5px; margin-bottom: 4px; }
.syam-review-item span { font-size: 14px; font-weight: 600; color: var(--syam-dark); }
.syam-review-total { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--syam-border); margin-top: 8px; }
.syam-price-big { font-size: 28px; font-weight: 800; color: var(--syam-primary) !important; }

.syam-checkout-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--syam-radius-sm);
    font-size: 13px;
    color: #78350f;
    margin-bottom: 20px;
}
.syam-notice-icon { font-size: 16px; flex-shrink: 0; }

.syam-error-msg {
    padding: 12px 16px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--syam-radius-sm);
    color: var(--syam-danger);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ====================================================
   MY BOOKINGS
   ==================================================== */
.syam-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: var(--syam-radius);
    border: 2px dashed var(--syam-border);
}
.syam-empty-icon { font-size: 48px; margin-bottom: 16px; }
.syam-empty-state h2 { font-size: 22px; margin: 0 0 8px; color: var(--syam-dark); }
.syam-empty-state p { color: var(--syam-gray); margin: 0 0 20px; font-size: 14px; }

.syam-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.syam-tab {
    padding: 8px 16px;
    border: 1px solid var(--syam-border);
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--syam-gray);
}
.syam-tab:hover, .syam-tab.active {
    background: var(--syam-primary);
    color: #fff;
    border-color: var(--syam-primary);
}
.syam-tab-count {
    background: rgba(255,255,255,0.25);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
}
.syam-tab.active .syam-tab-count { background: rgba(255,255,255,0.3); }

.syam-bookings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.syam-booking-card {
    background: #fff;
    border-radius: var(--syam-radius);
    box-shadow: var(--syam-shadow);
    overflow: hidden;
    border: 1px solid var(--syam-border);
    transition: box-shadow 0.2s;
}
.syam-booking-card:hover { box-shadow: var(--syam-shadow-lg); }
.syam-booking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--syam-border);
}
.syam-booking-type { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--syam-dark); }
.syam-type-icon { font-size: 18px; }
.syam-booking-card-body { padding: 14px 16px; }
.syam-booking-ref { margin-bottom: 8px; }
.syam-booking-ref code { font-size: 11px; background: var(--syam-light-bg); padding: 3px 8px; border-radius: 4px; color: var(--syam-primary); }
.syam-booking-period { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--syam-dark); margin-bottom: 6px; }
.syam-period-icon { font-size: 14px; }
.syam-booking-slots { font-size: 12px; color: var(--syam-gray); }
.syam-booking-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--syam-border);
    background: #fafafe;
}
.syam-booking-price { font-size: 16px; font-weight: 700; color: var(--syam-primary); }
.syam-booking-actions { display: flex; gap: 6px; }

/* Recent bookings mini --*/
.syam-bookings-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.syam-booking-mini-card {
    background: #fff;
    border: 1px solid var(--syam-border);
    border-radius: var(--syam-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--syam-shadow);
}
.syam-mini-type { font-size: 13px; font-weight: 600; color: var(--syam-dark); }
.syam-mini-dates { font-size: 12px; color: var(--syam-gray); }
.syam-mini-price { font-size: 15px; font-weight: 700; color: var(--syam-primary); }

/* Badge (reuse from admin) */
.syam-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.syam-status-active    { background: #d1fae5; color: #059669; }
.syam-status-pending   { background: #fef3c7; color: #d97706; }
.syam-status-upcoming  { background: #dbeafe; color: #2563eb; }
.syam-status-expired   { background: #f3f4f6; color: #6b7280; }
.syam-status-cancelled { background: #fee2e2; color: #dc2626; }
.syam-status-default   { background: #f3f4f6; color: #374151; }

/* Loading */
.syam-loading { text-align: center; padding: 30px; color: var(--syam-gray); font-size: 14px; }
.syam-loading::before { content: '⏳'; display: block; font-size: 24px; margin-bottom: 8px; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 768px) {
    .syam-vendor-header { flex-direction: column; }
    .syam-date-picker-wrap { flex-direction: column; }
    .syam-date-separator { display: none; }
    .syam-date-input { width: 100%; }
    .syam-steps { gap: 0; }
    .syam-step-label { display: none; }
    .syam-ad-types-grid { grid-template-columns: 1fr; }
    .syam-bookings-grid { grid-template-columns: 1fr; }
    .syam-review-grid { grid-template-columns: 1fr 1fr; }
    .syam-step-actions { flex-direction: column; }
    .syam-btn-primary-large,
    .syam-btn-back { width: 100%; justify-content: center; }
}