/* ==========================================================================
   Websites For Traders — design layer
   Elementor owns layout, spacing and colour (see Site Settings > Global).
   This file carries only what native widgets cannot express: the job-docket
   component, the rubber stamp, the perforation, and type details.
   Edit content in Elementor. Edit the docket look here.
   ========================================================================== */

:root{
  --wft-navy:#113C59;
  --wft-render:#E4E1D9;
  --wft-docket:#FAF6E9;
  --wft-amber:#FFC220;
  --wft-stamp:#BA301E;
  --wft-pencil:#5B6571;
  --wft-green:#0AAC8C;
  --wft-copy-yellow:#F2E4A8;
  --wft-copy-pink:#F0CFD3;
  --wft-disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --wft-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wft-mono:"Courier Prime","Courier New",monospace;
}

body{ background:var(--wft-render); }

/* Visible keyboard focus everywhere — navy ring + amber halo reads on both
   the navy and the render-grey surfaces. */
.wft-site a:focus-visible,
.wft-site button:focus-visible,
.wft-site input:focus-visible,
.wft-site select:focus-visible,
.wft-site textarea:focus-visible{
  outline:3px solid var(--wft-navy);
  outline-offset:2px;
  box-shadow:0 0 0 7px rgba(255,194,32,.95);
  border-radius:2px;
}

/* diagonal site-board hatching on navy sections */
.wft-hatch{ position:relative; }
.wft-hatch::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.055; z-index:0;
  background:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 16px);
}
.wft-hatch > .e-con-inner, .wft-hatch > .elementor-widget-wrap{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   THE DOCKET — signature element
   -------------------------------------------------------------------------- */
.wft-docket-stack{ position:relative; }
/* the yellow and pink carbon copies sitting under the top sheet */
.wft-docket-stack::before,
.wft-docket-stack::after{
  content:""; position:absolute; inset:0; border-radius:2px; z-index:0;
  box-shadow:0 8px 22px rgba(0,0,0,.30);
}
.wft-docket-stack::before{ background:var(--wft-copy-pink);   transform:rotate(-3.4deg) translate(-13px,11px); }
.wft-docket-stack::after { background:var(--wft-copy-yellow); transform:rotate(-1.6deg) translate(-6px,5px); }

.wft-docket{
  position:relative; z-index:1;
  background:var(--wft-docket) !important;
  border-radius:2px;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  transform:rotate(1.1deg);
  font-family:var(--wft-mono);
}
.wft-docket .elementor-heading-title,
.wft-docket p{ font-family:var(--wft-mono); }

.wft-docket-title .elementor-heading-title{
  font-family:var(--wft-disp) !important; text-transform:uppercase; font-weight:900;
  line-height:.9; letter-spacing:.02em; color:var(--wft-navy);
}
.wft-docket-rule{ border-bottom:2px solid var(--wft-navy); }

/* label / value rows with dashed leaders */
.wft-line{ border-bottom:1px dashed #C4BCA4; }
.wft-line .wft-label p{
  margin:0; color:var(--wft-pencil); text-transform:uppercase;
  letter-spacing:.09em; font-size:.68rem; white-space:nowrap;
}
.wft-line .wft-value p{ margin:0; font-weight:700; text-align:right; color:var(--wft-navy); }
.wft-zero p{ color:var(--wft-stamp) !important; }

.wft-total{ background:var(--wft-amber) !important; }
.wft-total .wft-label p{ color:var(--wft-navy); font-weight:700; font-size:.72rem; }
.wft-total .wft-value p{
  font-family:var(--wft-disp); font-size:2rem; font-weight:900; line-height:.9;
}

/* torn-off perforation */
.wft-perf{
  height:16px;
  background-image:radial-gradient(circle at 8px 8px, var(--wft-navy) 2.6px, transparent 3.1px);
  background-size:16px 16px;
  opacity:.35;
}
.wft-docket-foot p{
  margin:0; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wft-pencil); text-align:center;
}
.wft-docket-no p{ margin:0; font-size:.72rem; line-height:1.5; color:var(--wft-pencil); text-align:right; }
.wft-docket-no strong{ display:block; font-size:1.05rem; color:var(--wft-stamp); letter-spacing:.06em; }

/* PAID ONCE rubber stamp */
.wft-stamp{ position:absolute; right:-14px; bottom:44px; z-index:3; pointer-events:none; }
.wft-stamp .elementor-heading-title{
  display:inline-block;
  font-family:var(--wft-disp) !important; text-transform:uppercase; font-weight:900;
  font-size:1.5rem; line-height:.95; letter-spacing:.04em; text-align:center;
  color:var(--wft-stamp); border:4px solid var(--wft-stamp); border-radius:4px;
  padding:8px 14px; transform:rotate(-12deg); opacity:.86;
  background:rgba(250,246,233,.4);
}
@media (prefers-reduced-motion:no-preference){
  .wft-stamp .elementor-heading-title{ animation:wft-slam .5s cubic-bezier(.2,1.6,.4,1) .55s both; }
  @keyframes wft-slam{
    from{ opacity:0; transform:rotate(-12deg) scale(2.4); }
    to  { opacity:.86; transform:rotate(-12deg) scale(1); }
  }
}

/* --------------------------------------------------------------------------
   Type details Elementor globals cannot reach
   -------------------------------------------------------------------------- */
.wft-eyebrow .elementor-heading-title,
.wft-eyebrow p{
  font-family:var(--wft-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--wft-pencil); margin:0;
}
.wft-eyebrow--light .elementor-heading-title,
.wft-eyebrow--light p{ color:var(--wft-amber); }

.wft-num .elementor-heading-title{
  font-family:var(--wft-mono); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; color:var(--wft-stamp);
}
.wft-num--light .elementor-heading-title{ color:var(--wft-amber); }

/* the amber word inside a headline */
.wft-hl .elementor-heading-title em{ font-style:normal; color:var(--wft-amber); }

/* big figure used on the price cells */
.wft-fig .elementor-heading-title{
  font-family:var(--wft-disp); font-weight:900; font-size:3.2rem; line-height:.9;
}

/* spec rows */
.wft-spec .elementor-icon-list-item{ align-items:flex-start; }

/* --------------------------------------------------------------------------
   Buttons — flat, offset shadow, no gradient
   -------------------------------------------------------------------------- */
.wft-site .elementor-button{
  font-family:var(--wft-disp); text-transform:uppercase; font-weight:800;
  letter-spacing:.03em; border-radius:0;
  box-shadow:5px 5px 0 rgba(0,0,0,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.wft-site .elementor-button:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.28); }
.wft-btn-ghost .elementor-button{ box-shadow:none; }
.wft-btn-ghost .elementor-button:hover{ transform:none; }

/* --------------------------------------------------------------------------
   Header / footer (XPRO)
   -------------------------------------------------------------------------- */
.wft-header{ border-bottom:4px solid var(--wft-amber); }
.wft-footer{ border-top:4px solid var(--wft-amber); }
.wft-brandtext .elementor-heading-title{
  font-family:var(--wft-disp) !important; text-transform:uppercase; font-weight:900;
  color:#fff; line-height:1; letter-spacing:.005em;
}

/* --------------------------------------------------------------------------
   WPForms styled as a docket
   -------------------------------------------------------------------------- */
.wft-form .wpforms-container{ margin:0; }
.wft-form .wpforms-form{
  background:var(--wft-docket); padding:30px 30px 18px; position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.22); font-family:var(--wft-mono);
}
.wft-form .wpforms-form::before{
  content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--wft-stamp);
}
.wft-form .wpforms-field{ padding:16px 0 0 !important; border-bottom:1px dashed #C4BCA4; }
.wft-form .wpforms-field-label{
  font-family:var(--wft-mono) !important; font-size:.76rem !important; letter-spacing:.11em;
  text-transform:uppercase; color:var(--wft-pencil) !important; font-weight:400 !important;
  margin-bottom:6px !important;
}
.wft-form .wpforms-field-medium,
.wft-form input[type=text], .wft-form input[type=email], .wft-form input[type=tel],
.wft-form select, .wft-form textarea{
  width:100% !important; max-width:100% !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:10px 0 18px !important;
  font-family:var(--wft-body) !important; font-size:1.06rem !important; font-weight:600;
  color:var(--wft-navy) !important; box-shadow:none !important;
}
.wft-form textarea{ min-height:104px; font-weight:400; resize:vertical; }
.wft-form ::placeholder{ color:#B3AB94; font-weight:400; }
.wft-form .wpforms-submit-container{
  margin:26px -30px 0 !important; background:var(--wft-amber); padding:22px 30px !important;
}
.wft-form button.wpforms-submit{
  background:var(--wft-navy) !important; color:#fff !important; border:0 !important;
  border-radius:0 !important; font-family:var(--wft-disp) !important; text-transform:uppercase;
  font-weight:800 !important; font-size:1.15rem !important; letter-spacing:.03em;
  padding:17px 26px !important; box-shadow:5px 5px 0 rgba(0,0,0,.28);
}
.wft-form button.wpforms-submit:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.28); }
.wft-form .wpforms-required-label{ color:var(--wft-stamp) !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .wft-docket-stack::before{ transform:rotate(-2.4deg) translate(-8px,8px); }
  .wft-docket-stack::after { transform:rotate(-1.2deg) translate(-4px,4px); }
}
@media (max-width:767px){
  .wft-docket{ transform:none; }
  .wft-stamp{ right:-8px; bottom:58px; }
  .wft-stamp .elementor-heading-title{ font-size:1.05rem; padding:6px 10px; border-width:3px; }
  .wft-total .wft-value p{ font-size:1.6rem; }
  .wft-fig .elementor-heading-title{ font-size:2.6rem; }
  .wft-form .wpforms-form{ padding:24px 22px 14px; }
  .wft-form .wpforms-submit-container{ margin:22px -22px 0 !important; padding:20px 22px !important; }
  .wft-form button.wpforms-submit{ width:100%; }
}