/**
 * Warranty Lookup Module – Catalog Professional Gray Palette
 *
 * All rules are scoped to #product-warranty-lookup so they cannot
 * bleed into the rest of the OpenCart storefront theme.
 *
 * Palette (.cursorrules spec):
 *   Nav/Headers : #343A40  (Dark Charcoal)
 *   Btn Primary : #4B5563  hover #374151
 *   Btn Secondary: #E5E7EB hover #D1D5DB
 *   Background  : #F3F4F6
 *   Surface     : #ffffff
 *   Stripe      : #f9fafb
 *   Border      : #E5E7EB
 *   Text        : #212529
 *   Muted       : #6C757D
 *   On-primary  : #ffffff
 */

#product-warranty-lookup {
    --wl-nav:              #343A40;
    --wl-btn-primary:      #4B5563;
    --wl-btn-primary-hover:#374151;
    --wl-btn-secondary:    #E5E7EB;
    --wl-btn-secondary-hover: #D1D5DB;
    --wl-bg:               #F3F4F6;
    --wl-bg-surface:       #ffffff;
    --wl-bg-stripe:        #f9fafb;
    --wl-border:           #E5E7EB;
    --wl-text:             #212529;
    --wl-text-muted:       #6C757D;
    --wl-on-primary:       #ffffff;
    --wl-radius:           4px;
    --wl-shadow:           0 2px 4px rgba(0,0,0,.08);
}

/* ── Page layout ────────────────────────────────────────────── */
#product-warranty-lookup {
    padding-top:    20px;
    padding-bottom: 40px;
}
#product-warranty-lookup h1 {
    color:       var(--wl-text);
    font-size:   1.75rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
#product-warranty-lookup .breadcrumb-item a {
    color: var(--wl-btn-primary);
}
#product-warranty-lookup .breadcrumb-item.active {
    color: var(--wl-text-muted);
}

/* ── Primary buttons (Deep Gray) ────────────────────────────── */
#product-warranty-lookup .btn-primary {
    background-color: var(--wl-btn-primary);
    border-color:     var(--wl-btn-primary);
    color:            var(--wl-on-primary);
    font-weight:      600;
}
#product-warranty-lookup .btn-primary:hover,
#product-warranty-lookup .btn-primary:focus,
#product-warranty-lookup .btn-primary:active {
    background-color: var(--wl-btn-primary-hover);
    border-color:     var(--wl-btn-primary-hover);
    color:            var(--wl-on-primary);
}

/* ── Secondary / reset buttons ──────────────────────────────── */
#product-warranty-lookup .btn-secondary {
    background-color: var(--wl-btn-secondary);
    border-color:     #D1D5DB;
    color:            var(--wl-text);
}
#product-warranty-lookup .btn-secondary:hover,
#product-warranty-lookup .btn-secondary:focus {
    background-color: var(--wl-btn-secondary-hover);
    border-color:     var(--wl-btn-secondary-hover);
    color:            var(--wl-text);
}

/* ── Search form card ───────────────────────────────────────── */
#product-warranty-lookup .warranty-lookup-form > .card {
    border-color: var(--wl-border);
    box-shadow:   var(--wl-shadow);
}
#product-warranty-lookup .warranty-lookup-form .card-title {
    color:       var(--wl-text);
    font-weight: 700;
    font-size:   1.1rem;
}
#product-warranty-lookup .warranty-lookup-form .card-text {
    color: var(--wl-text-muted);
}

/* ── Serial number label ────────────────────────────────────── */
#product-warranty-lookup .wl-input-label {
    color:       var(--wl-text);
    font-weight: 600;
    font-size:   13px;
    margin-bottom: 6px;
    display:     block;
}

/* ── Form control focus ─────────────────────────────────────── */
#product-warranty-lookup .form-control:focus {
    border-color: var(--wl-btn-primary);
    box-shadow:   0 0 0 0.2rem rgba(75, 85, 99, 0.20);
    outline:      none;
}

/* ── Card header – Dark Charcoal (product info) ─────────────── */
#product-warranty-lookup .wl-card-header {
    background-color: var(--wl-nav);
    color:            var(--wl-on-primary);
    border-bottom:    1px solid #2d3238;
    font-weight:      600;
    border-radius:    var(--wl-radius) var(--wl-radius) 0 0;
}
#product-warranty-lookup .wl-card-header h5,
#product-warranty-lookup .wl-card-header .mb-0 {
    color: var(--wl-on-primary);
}

/* ── Card header – neutral light gray (additional info) ─────── */
#product-warranty-lookup .wl-card-header-neutral {
    background-color: var(--wl-bg);
    color:            var(--wl-text);
    border-bottom:    1px solid var(--wl-border);
    font-weight:      600;
    border-radius:    var(--wl-radius) var(--wl-radius) 0 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
#product-warranty-lookup .card {
    border-color:  var(--wl-border);
    box-shadow:    var(--wl-shadow);
    border-radius: var(--wl-radius);
    overflow:      hidden;
}
#product-warranty-lookup .card-body {
    background-color: var(--wl-bg-surface);
    padding:          1.25rem;
}

/* ── Table responsive wrapper ───────────────────────────────── */
#product-warranty-lookup .table-responsive {
    border:        none;
    overflow-x:    auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table headers ──────────────────────────────────────────── */
#product-warranty-lookup table th {
    background-color: var(--wl-bg-stripe);
    color:            var(--wl-text);
    border-color:     var(--wl-border);
    font-weight:      600;
    font-size:        12px;
    text-transform:   uppercase;
    letter-spacing:   .4px;
}
#product-warranty-lookup table td {
    border-color:   var(--wl-border);
    color:          var(--wl-text);
    vertical-align: middle;
}
#product-warranty-lookup table tbody tr:hover {
    background-color: var(--wl-bg-stripe);
}

/* ── Badges ─────────────────────────────────────────────────── */
#product-warranty-lookup .badge {
    font-size:     0.875em;
    padding:       0.4em 0.75em;
    border-radius: 4px;
}

/* ── Alert styling ──────────────────────────────────────────── */
#product-warranty-lookup .alert {
    border-radius: var(--wl-radius);
}
#product-warranty-lookup .alert h4 {
    font-size:   1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ── Warranty status card headers ───────────────────────────── */
#product-warranty-lookup .bg-success {
    background-color: #16a34a !important;
}
#product-warranty-lookup .bg-danger {
    background-color: #dc2626 !important;
}
#product-warranty-lookup .bg-warning {
    background-color: #d97706 !important;
}

/* ── Additional info card body ──────────────────────────────── */
#product-warranty-lookup .wl-additional-info strong {
    color:       var(--wl-text);
    font-weight: 600;
    font-size:   12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    display:     block;
    margin-bottom: 4px;
}
#product-warranty-lookup .wl-additional-info .wl-info-value {
    color: var(--wl-text-muted);
}

/* ── Help text ──────────────────────────────────────────────── */
#product-warranty-lookup .text-muted {
    color: var(--wl-text-muted) !important;
}

/* ── Responsive stacking ────────────────────────────────────── */
@media (max-width: 767px) {
    #product-warranty-lookup .input-group {
        flex-direction: column;
    }
    #product-warranty-lookup .input-group .form-control,
    #product-warranty-lookup .input-group .btn {
        width:         100%;
        border-radius: var(--wl-radius) !important;
        margin-bottom: 6px;
    }
    #product-warranty-lookup .col-md-4,
    #product-warranty-lookup .col-md-6 {
        margin-bottom: 16px;
    }
}
