/* ============================================================
   AM Tailors — Designer styling
   Colors and logo are CSS variables / a text logo, so you can
   swap either without touching layout rules below.
   ============================================================ */

:root{
  --white:#FFFFFF; --digital-black:#192435; --dark-green:#014722; --am-green:#017737;
  --light-blue:#D0F0FD; --light-green:#D7F9D3; --yellow:#FFC72C;
  --radius:4px; --hairline: rgba(25,36,53,0.14);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--white); color:var(--digital-black); font-family:'Inter',system-ui,sans-serif; }
button, select, input{ font-family:inherit; }

/* ---------- Topbar ---------- */
.amt-topbar{ background:var(--dark-green); color:var(--white); display:flex; align-items:center; justify-content:space-between; padding:16px 20px; flex-wrap:wrap; gap:10px; }
.amt-logo{ color:var(--white); text-decoration:none; font-weight:800; font-size:19px; }
.amt-topnav a{ color:rgba(255,255,255,.8); text-decoration:none; font-size:13.5px; margin-left:16px; padding-bottom:4px; border-bottom:2px solid transparent; }
.amt-topnav a.active, .amt-topnav a:hover{ color:var(--white); border-bottom-color:var(--yellow); }

.amt-footer{ background:var(--dark-green); color:rgba(255,255,255,.8); text-align:center; padding:16px; font-size:13px; }

/* ---------- Layout: mobile-first (stacked), desktop side-by-side ---------- */
.amt-designer{ display:flex; flex-direction:column; min-height:70vh; }
@media (min-width:900px){
  .amt-designer{ flex-direction:row; align-items:flex-start; }
  .amt-preview-pane{ flex:1; position:sticky; top:0; }
  .amt-options-wrap{ width:420px; flex-shrink:0; border-left:1px solid var(--hairline); }
}

/* ---------- Preview pane ---------- */
.amt-preview-pane{ padding:20px; }
.amt-preview-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.amt-view-switch{ display:flex; gap:4px; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.amt-view-switch button{ background:var(--white); border:none; padding:7px 12px; font-size:13px; cursor:pointer; opacity:.6; border-right:1px solid var(--hairline); }
.amt-view-switch button:last-child{ border-right:none; }
.amt-view-switch button.active{ background:var(--light-blue); color:var(--dark-green); opacity:1; font-weight:600; }
.amt-zoom-controls{ display:flex; gap:6px; }
.amt-zoom-controls button{ width:30px; height:30px; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--white); font-size:16px; cursor:pointer; }
.amt-zoom-controls button:hover{ background:var(--light-blue); }

.amt-preview-box{ height:380px; border:1px solid var(--hairline); border-radius:var(--radius); background:#F3F1EC; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.amt-preview-box svg{ max-height:100%; }
.amt-preview-note{ font-size:12.5px; opacity:.6; margin-top:10px; }

/* ---------- Options panel / bottom sheet ---------- */
.amt-options-wrap{ background:var(--white); }
.amt-sheet-toggle{ display:none; width:100%; background:var(--dark-green); color:var(--white); border:none; padding:14px 18px; font-size:14px; font-weight:700; text-align:left; cursor:pointer; }
@media (max-width:899px){
  .amt-sheet-toggle{ display:block; position:sticky; bottom:0; z-index:5; }
  .amt-options-wrap{ position:fixed; left:0; right:0; bottom:0; max-height:85vh; overflow-y:auto; box-shadow:0 -4px 20px rgba(0,0,0,.15); transform:translateY(calc(100% - 50px)); transition:transform .25s ease; z-index:4; }
  .amt-options-wrap.amt-sheet-open{ transform:translateY(0); }
  .amt-options-wrap .amt-sheet-toggle{ order:-1; }
  .amt-options-header, .amt-options-panel, .amt-enquiry-form{ padding:0 18px; }
}

.amt-options-header{ padding:18px; border-bottom:1px solid var(--hairline); }
.amt-price-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; margin-bottom:14px; }
.amt-price-row strong{ font-size:22px; color:var(--am-green); }
.amt-toolbar-buttons{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.amt-toolbar-buttons button{ border:1px solid var(--hairline); background:var(--white); border-radius:var(--radius); padding:7px 12px; font-size:12.5px; cursor:pointer; }
.amt-toolbar-buttons button:hover{ background:var(--light-blue); }
.amt-toolbar-buttons button:disabled{ opacity:.4; cursor:not-allowed; }
#amt-share{ background:var(--yellow); border-color:var(--yellow); color:var(--dark-green); font-weight:700; }

.amt-fabric-filter{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.amt-fabric-filter button{ border:1px solid var(--hairline); background:var(--white); border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer; opacity:.7; }
.amt-fabric-filter button.active{ background:var(--am-green); color:var(--white); opacity:1; border-color:var(--am-green); }
.amt-fabric-filter input{ border:1px solid var(--hairline); border-radius:var(--radius); padding:6px 10px; font-size:12.5px; flex:1; min-width:120px; }

.amt-options-panel{ padding:18px; }
.amt-opt{ margin-bottom:20px; }
.amt-opt-label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--dark-green); }
.amt-opt select{ width:100%; padding:9px 10px; border:1px solid var(--hairline); border-radius:var(--radius); font-size:14px; background:var(--white); }

.amt-swatch-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.amt-swatch-grid-small .amt-swatch-sm{ width:28px; height:28px; }
.amt-swatch{ width:36px; height:36px; border-radius:50%; border:2px solid var(--hairline); padding:0; cursor:pointer; overflow:hidden; background:none; }
.amt-swatch.active{ border-color:var(--am-green); box-shadow:0 0 0 2px var(--light-green); }
.amt-swatch-fill{ display:block; width:100%; height:100%; border-radius:50%; }
.amt-swatch-current{ font-size:12.5px; opacity:.7; margin:8px 0 0; }

.amt-char-count{ font-size:11.5px; opacity:.55; margin:4px 0 0; text-align:right; }
.amt-opt input[type=text]{ width:100%; padding:9px 10px; border:1px solid var(--hairline); border-radius:var(--radius); font-size:14px; }

/* ---------- Enquiry form ---------- */
.amt-enquiry-form{ padding:18px; border-top:1px solid var(--hairline); }
.amt-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
@media (max-width:420px){ .amt-field-grid{ grid-template-columns:1fr; } }
.amt-field-grid label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.amt-field-grid input{ width:100%; padding:9px 10px; border:1px solid var(--hairline); border-radius:var(--radius); font-size:14px; }
.amt-cta-btn{ width:100%; background:var(--yellow); color:var(--dark-green); border:none; border-radius:var(--radius); padding:13px; font-size:15px; font-weight:700; cursor:pointer; }
.amt-cta-btn:hover{ opacity:.9; }

/* Focus visibility for accessibility */
button:focus-visible, select:focus-visible, input:focus-visible{ outline:2px solid var(--am-green); outline-offset:2px; }