/*
Theme Name: Aariz Traders
Theme URI: https://aariztraders.com
Description: Custom child theme for Aariz Traders. Design tokens, WooCommerce spec-plate templates and shortcodes live here.
Author: Tayyab Hassan
Template: hello-elementor
Version: 1.0.0
Text Domain: aariz-child
License: GNU General Public License v2 or later
*/

/* Design tokens. Never hardcode a colour anywhere else. */
:root{
  --az-ink:#15181C;
  --az-ink-2:#232830;
  --az-ink-3:#3A414B;
  --az-paper:#F4F4F1;
  --az-card:#FFFFFF;
  --az-line:#E1E0DA;
  --az-line-2:#CFCEC6;
  --az-steel:#63696F;
  --az-green:#0B6E4F;
  --az-green-d:#075139;
  --az-green-t:#E7F0EB;
  --az-flame:#D6461F;
  --az-flame-t:#FBEDE8;
  --az-wa:#1EAE55;
  --az-radius:4px;
  --az-shell:1200px;
  --az-display:'Archivo',system-ui,sans-serif;
  --az-body:'IBM Plex Sans',system-ui,sans-serif;
  --az-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Control and form tokens, from the design's colour contract. */
  --az-control:#82868C;
  --az-field:#FBFBF9;
  --az-placeholder:#676D73;
  --az-star:#A8730E;
  --az-star-off:#CFCEC6;
  --az-grade-b-bg:#F2EFE4;
  --az-grade-b-ink:#7A6412;

  /* Form error state. Deliberately NOT flame: the design reserves flame
     exclusively for prices, so a failed field borrows a cooler crimson
     that cannot be mistaken for a price. 6.5:1 on its own tint. */
  --az-danger:#A3202E;
  --az-danger-bg:#FAECEE;
  --az-danger-line:rgba(163,32,46,.28);
}


/* ==========================================================
   Reviews

   Scoped to .revwrap rather than living in the Elementor
   widget's custom_css, because the same component now renders
   in two places: the Home section and the Reviews page. Widget
   CSS is page-scoped and could not reach the second one.
   ========================================================== */

.revwrap--page{
  max-width:var(--az-shell);
  margin:0 auto;
  padding:64px 24px 88px;
}

.revwrap .rev-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:36px;
}

.revwrap .rev-head-l{flex:1 1 auto;min-width:0;}

.revwrap .eb{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--az-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--az-steel);
  margin:0 0 14px;
}

.revwrap .eb::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--az-line-2);
  flex:none;
}

.revwrap h2{
  font-family:var(--az-display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--az-ink);
  max-width:20ch;
  margin:0;
}

.revwrap .csub{
  font-family:var(--az-body);
  font-size:15.5px;
  line-height:1.6;
  color:var(--az-steel);
  max-width:52ch;
  margin:10px 0 0;
}


/* Write a review: primary action, solid accent. */

.revwrap .rev-toggle{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border:0;
  border-radius:var(--az-radius);
  background:var(--az-green);
  color:#FFFFFF;
  font-family:var(--az-body);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease;
}

.revwrap .rev-toggle:hover,
.revwrap .rev-toggle:focus{background:var(--az-green-d);color:#FFFFFF;}

.revwrap .rev-toggle:focus-visible{
  outline:2px solid var(--az-green);
  outline-offset:2px;
}

.revwrap--page .rev-toggle{display:none;}


/* The form panel. */

.revwrap .rev-panel{
  background:var(--az-card);
  border:1px solid var(--az-line);
  border-radius:var(--az-radius);
  padding:28px;
  margin-bottom:28px;
}

.revwrap .rev-panel[hidden]{display:none;}

.revwrap .rf-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.revwrap .screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.revwrap .rev-form label,
.revwrap .rev-form legend{
  display:block;
  font-family:var(--az-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--az-steel);
  margin:0 0 7px;
  padding:0;
}

.revwrap .rev-form label em{
  font-style:normal;
  text-transform:none;
  letter-spacing:.02em;
  color:var(--az-control);
}

.revwrap .rf-rating{border:0;padding:0;margin:0 0 22px;}


/* Star rating: five real radios, so it is keyboard-operable and works
   with JavaScript off. Rendered 5 to 1 and flipped with row-reverse so
   the sibling combinator can fill every star to the left of the choice. */

.revwrap .rf-stars{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:4px;
}

.revwrap .rf-stars input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.revwrap .rf-stars label{
  margin:0;
  padding:2px;
  cursor:pointer;
  color:var(--az-star-off);
  line-height:0;
  border-radius:var(--az-radius);
  transition:color .12s ease;
}

.revwrap .rf-stars label svg{fill:currentColor;display:block;}

.revwrap .rf-stars input:checked ~ label{color:var(--az-star);}

.revwrap .rf-stars:hover label{color:var(--az-star-off);}

.revwrap .rf-stars label:hover,
.revwrap .rf-stars label:hover ~ label{color:var(--az-star);}

.revwrap .rf-stars input:focus-visible + label{
  outline:2px solid var(--az-green);
  outline-offset:1px;
}


/* Fields. */

.revwrap .rf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

.revwrap .field{min-width:0;}
.revwrap .field--full{margin-bottom:16px;}

.revwrap .rev-form input[type=text],
.revwrap .rev-form input[type=email],
.revwrap .rev-form textarea{
  width:100%;
  box-sizing:border-box;
  font-family:var(--az-body);
  font-size:15px;
  line-height:1.5;
  color:var(--az-ink);
  background:var(--az-field);
  border:1px solid var(--az-control);
  border-radius:var(--az-radius);
  padding:11px 13px;
  transition:border-color .14s ease,background .14s ease;
}

.revwrap .rev-form textarea{resize:vertical;min-height:120px;}

.revwrap .rev-form ::placeholder{color:var(--az-placeholder);opacity:1;}

.revwrap .rev-form input:focus,
.revwrap .rev-form textarea:focus{
  background:var(--az-card);
  border-color:var(--az-green);
  outline:2px solid var(--az-green);
  outline-offset:-1px;
}

.revwrap .rf-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 26px;
  border:0;
  border-radius:var(--az-radius);
  background:var(--az-green);
  color:#FFFFFF;
  font-family:var(--az-body);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease;
}

.revwrap .rf-submit:hover{background:var(--az-green-d);}
.revwrap .rf-submit:disabled{background:var(--az-control);cursor:default;}

.revwrap .rf-submit:focus-visible{
  outline:2px solid var(--az-green);
  outline-offset:2px;
}

.revwrap .rf-note{
  margin:14px 0 0;
  font-family:var(--az-body);
  font-size:13px;
  line-height:1.6;
  color:var(--az-steel);
  max-width:60ch;
}

.revwrap .rf-error{
  margin:0 0 14px;
  font-family:var(--az-body);
  font-size:14px;
  line-height:1.55;
  color:var(--az-danger);
  background:var(--az-danger-bg);
  border:1px solid var(--az-danger-line);
  border-radius:var(--az-radius);
  padding:11px 13px;
}


/* Result states. */

.revwrap .rev-thanks,
.revwrap .rev-alert{
  border-radius:var(--az-radius);
  padding:18px 20px;
  margin-bottom:28px;
}

.revwrap .rev-thanks{
  background:var(--az-green-t);
  border:1px solid rgba(11,110,79,.24);
}

.revwrap .rev-alert{
  background:var(--az-danger-bg);
  border:1px solid var(--az-danger-line);
}

.revwrap .rev-thanks p,
.revwrap .rev-alert p{
  margin:0;
  font-family:var(--az-body);
  font-size:15px;
  line-height:1.6;
}

.revwrap .rev-thanks p{color:var(--az-green-d);}
.revwrap .rev-alert p{color:var(--az-danger);}


/* The review cards. */

.revwrap .rev-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.revwrap .rev{
  display:flex;
  flex-direction:column;
  background:var(--az-card);
  border:1px solid var(--az-line);
  border-radius:var(--az-radius);
  padding:26px;
  margin:0;
}

.revwrap .stars{
  display:flex;
  gap:2px;
  color:var(--az-star);
  margin-bottom:14px;
}

.revwrap .stars .st-off{color:var(--az-star-off);}

.revwrap .rev blockquote{
  margin:0;
  font-family:var(--az-body);
  font-size:15.5px;
  line-height:1.7;
  color:var(--az-ink);
}

.revwrap .rev-who{
  font-style:normal;
  display:flex;
  align-items:center;
  gap:11px;
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid var(--az-line);
}

.revwrap .av{
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--az-radius);
  background:var(--az-green-t);
  color:var(--az-green-d);
  font-family:var(--az-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.04em;
}

.revwrap .rev-id{display:block;min-width:0;}

.revwrap .rev-id b{
  display:block;
  font-family:var(--az-body);
  font-size:14px;
  font-weight:600;
  color:var(--az-ink);
  line-height:1.3;
}

.revwrap .rev-id span{
  display:block;
  font-family:var(--az-body);
  font-size:12px;
  color:var(--az-steel);
  line-height:1.4;
}

.revwrap .rev-who,
.revwrap .rev-id b,
.revwrap .rev-id span{font-style:normal;}


/* Secondary paths out. */

.revwrap .linkarrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--az-body);
  font-weight:600;
  font-size:14.5px;
  color:var(--az-green);
  text-decoration:none;
  white-space:nowrap;
  flex:none;
  transition:gap .16s ease;
}

.revwrap .linkarrow:hover{gap:11px;}
.revwrap .rev-more{margin-top:22px;}

.revwrap .rev-google{
  margin:22px 0 0;
  font-family:var(--az-body);
  font-size:13.5px;
  color:var(--az-steel);
}

.revwrap .rev-google a{color:var(--az-green);font-weight:600;}


@media (max-width:900px){
  .revwrap .rev-grid{grid-template-columns:1fr;}
  .revwrap .rf-row{grid-template-columns:1fr;}
  .revwrap .rev-toggle{width:100%;}
  .revwrap--page{padding:44px 20px 64px;}
}

@media (prefers-reduced-motion:reduce){
  .revwrap .rev-toggle,
  .revwrap .rf-submit,
  .revwrap .linkarrow,
  .revwrap .rf-stars label,
  .revwrap .rev-form input,
  .revwrap .rev-form textarea{transition:none;}
}