html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ================================================
   wwwroot/css/site.css
   VELMORA — Styling layer only.
   Targets your EXISTING Bootstrap classes
   (navbar, nav-link, btn-dark, container, footer).
   No HTML/Razor changes needed — just replace this file.
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --paper:      #EFE9DF;   /* warm sand background */
    --panel:      #FBF8F2;
    --ink:        #201D1A;   /* near-black brown text */
    --ink-soft:   #6B6357;
    --line:       #DCD3C2;
    --forest:     #3B4A3F;   /* primary accent (buttons/links) */
    --forest-dark:#2A362D;
    --brass:      #A9834F;   /* highlight accent */
    --rust:       #8C4A38;

    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', -apple-system, sans-serif;
}

/* ---- Base ---- */
body{
    background:var(--paper) !important;
    color:var(--ink);
    font-family:var(--font-body);
    font-size:15px;
}
h1,h2,h3,h4,h5{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--ink);
    letter-spacing:-0.01em;
}
a{ color:var(--forest); }
a:hover{ color:var(--forest-dark); }

.container{
    max-width:1180px;
}

/* ================================================
   NAVBAR (your existing .navbar / .navbar-brand / .nav-link)
   ================================================ */
.navbar{
    background:var(--panel) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:none !important;
    padding-top:14px;
    padding-bottom:14px;
}
.navbar-brand{
    font-family:var(--font-display);
    font-size:24px !important;
    font-weight:600 !important;
    color:var(--ink) !important;
    letter-spacing:0.01em;
}
.navbar-nav .nav-link{
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:500;
    color:var(--ink-soft) !important;
    padding:8px 14px !important;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
}
.navbar-nav .nav-link:hover{
    color:var(--forest) !important;
    border-bottom-color:var(--forest);
}
.navbar-toggler{
    border-color:var(--line) !important;
}

/* ================================================
   BUTTONS (your existing .btn-dark, and .btn-primary
   if used elsewhere e.g. Add to Cart / Checkout buttons)
   ================================================ */
.btn-dark{
    background:var(--forest) !important;
    border-color:var(--forest) !important;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:0.01em;
    border-radius:3px !important;
}
.btn-dark:hover{
    background:var(--forest-dark) !important;
    border-color:var(--forest-dark) !important;
}
.btn-primary{
    background:var(--forest) !important;
    border-color:var(--forest) !important;
}
.btn-primary:hover{
    background:var(--forest-dark) !important;
    border-color:var(--forest-dark) !important;
}
.btn-outline-dark{
    color:var(--ink) !important;
    border-color:var(--ink) !important;
}
.btn-outline-dark:hover{
    background:var(--ink) !important;
    color:#fff !important;
}

/* ================================================
   CARDS (Product listing / Cart / Order cards, if you
   use Bootstrap's .card component anywhere)
   ================================================ */
.card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(32,29,26,0.08);
}
.card-title{
    font-family:var(--font-display);
    font-weight:500;
}
.card-img-top{
    background:var(--line);
}

/* ================================================
   TABLES (Admin / Order lists, if Bootstrap table classes used)
   ================================================ */
.table{ color:var(--ink); }
.table thead{
    font-family:var(--font-body);
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border-bottom:2px solid var(--line) !important;
}
.table td, .table th{
    border-color:var(--line) !important;
}

/* ================================================
   BADGES / ALERTS (order status, stock labels, etc.)
   ================================================ */
.badge.bg-success{ background:var(--forest) !important; }
.badge.bg-warning{ background:var(--brass) !important; color:#fff !important; }
.badge.bg-danger{ background:var(--rust) !important; }

.alert-success{
    background:#E7EBE6; border-color:var(--forest); color:var(--forest-dark);
}
.alert-danger{
    background:#F1E3DE; border-color:var(--rust); color:var(--rust);
}

/* ================================================
   FORMS (Checkout, Sign In, Admin forms)
   ================================================ */
.form-control, .form-select{
    border-color:var(--line);
    border-radius:3px;
    font-size:14px;
}
.form-control:focus, .form-select:focus{
    border-color:var(--forest);
    box-shadow:0 0 0 3px rgba(59,74,63,0.12);
}
.form-label{
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
}

/* ================================================
   FOOTER (your existing footer.footer)
   ================================================ */
footer.footer{
    background:var(--ink);
    color:#B8AF9E;
    border-top:none !important;
    padding:22px 0;
    margin-top:60px !important;
}
footer.footer a{
    color:#D9CFBB;
}
footer.footer a:hover{
    color:#fff;
}

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, .nav-link:focus-visible{
    outline:2px solid var(--forest);
    outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
}
/* Sticky footer — poori tarah reset ke sath */
*{
    box-sizing:border-box;
}
html, body{
    height:100%;
    margin:0;
    padding:0;
}
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--paper);
}
.container{
    flex-shrink:0;
    width:100%;
}
main{
    flex:1 0 auto;
    display:block;
}
footer.footer{
    flex-shrink:0;
    margin-top:0 !important;
    margin-bottom:0 !important;
}