/* =====================================================================
   Hello Kishan · common.css
   Loaded by BOTH the customer website and the admin panel.
   Only shared things live here: brand colours, buttons, form focus,
   and the order / quotation status pills that both sides show.
     1. Brand colours & base
     2. Status pills (orders, quotations, payments)
   ===================================================================== */

/* 1. Brand colours & base ------------------------------------------- */
/* Colours are picked straight from the Hello Kishan logo:
   the dark green of the letters, the leaf green, and the wheat gold.
   Gold buttons always get dark green text, white on gold is too faint to read. */
:root {
    --hk-green: #075931;       /* logo letters */
    --hk-green-dark: #04401f;
    --hk-leaf: #3f9621;        /* logo leaves */
    --hk-green-soft: #eaf4e4;
    --hk-gold: #fdc109;        /* wheat + underline */
    --hk-gold-dark: #e6a800;
    --hk-gold-soft: #fff6d6;
    --hk-ink: #1c2a20;
    --hk-muted: #66756a;
    --hk-border: #e2e8df;
    --hk-bg: #f6f8f4;
    --bs-primary: var(--hk-green);
    --bs-link-color: var(--hk-green);
    --bs-link-color-rgb: 7, 89, 49;
    --bs-link-hover-color-rgb: 4, 64, 31;
    --bs-link-hover-color: var(--hk-green-dark);
}

body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--hk-ink);
    background: #fff;
    font-size: .95rem;
}

h1, h2, h3, h4, h5 { font-weight: 700; }

/* Smooth feel: gentle scrolling to #links and soft hover on buttons and links.
   Turned off for visitors who ask their phone for less motion. */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
.btn, .form-control, .form-select, a { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.btn { border-radius: 8px; font-weight: 500; min-height: 40px; } /* 44px touch target with padding */
.btn-sm { min-height: 32px; }
.btn-hk { background: var(--hk-gold); border-color: var(--hk-gold); color: var(--hk-green-dark); font-weight: 600; }
.btn-hk:hover, .btn-hk:focus { background: var(--hk-gold-dark); border-color: var(--hk-gold-dark); color: var(--hk-green-dark); }
.btn-hk-green { background: var(--hk-green); border-color: var(--hk-green); color: #fff; }
.btn-hk-green:hover { background: var(--hk-green-dark); border-color: var(--hk-green-dark); color: #fff; }
.btn-outline-hk { border: 1.5px solid var(--hk-green); color: var(--hk-green); background: #fff; }
.btn-outline-hk:hover { background: var(--hk-green); color: #fff; }
.text-hk-gold { color: var(--hk-gold-dark) !important; }
.text-hk-green { color: var(--hk-green) !important; }
.bg-hk-soft { background: var(--hk-bg); }
.form-control, .form-select { border-radius: 8px; min-height: 42px; }
.form-control:focus, .form-select:focus { border-color: var(--hk-green); box-shadow: 0 0 0 .2rem rgba(7,89,49,.15); }
.section-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1.25rem; }
.section-title h2 { font-size: 1.4rem; margin: 0; }
.section-title h2::after { content: ""; display: block; width: 46px; height: 3px; background: var(--hk-gold); margin-top: 6px; border-radius: 2px; }

/* 2. Status pills ------------------------------------------------------ */
.status-pill { display: inline-block; padding: .2rem .65rem; border-radius: 30px; font-size: .75rem; font-weight: 600; }
.status-pending, .status-new { background: #fff3e0; color: #e65100; }
.status-confirmed, .status-assigned, .status-contacted { background: #e3f2fd; color: #1565c0; }
.status-picking, .status-packed, .status-quoted { background: #ede7f6; color: #5e35b1; }
.status-shipped { background: #e0f7fa; color: #00838f; }
.status-delivered, .status-won, .status-paid, .status-verified { background: var(--hk-green-soft); color: var(--hk-green); }
.status-cancelled, .status-lost, .status-failed { background: #ffebee; color: #c62828; }
.status-return_requested, .status-refunded, .status-unpaid { background: #f5f5f5; color: #616161; }
.cart-thumb { width: 72px; height: 56px; object-fit: contain; background: var(--hk-bg); border-radius: 8px; }

/* Tick boxes and switches in brand green instead of Bootstrap blue */
.form-check-input:checked { background-color: var(--hk-leaf); border-color: var(--hk-leaf); }
.form-check-input:focus { border-color: var(--hk-leaf); box-shadow: 0 0 0 .2rem rgba(63,150,33,.2); }

/* STEP 56 · iPhone / iPad Safari zooms the whole page when you tap a box with text smaller
   than 16px. Keep every box at 16px on phones and tablets so the page stays still. */
@media (max-width: 991.98px) {
    input:not([type=checkbox]):not([type=radio]), select, textarea,
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    .input-group-sm > .form-control { font-size: 16px; }
}