/*
Theme Name: AppyEPOS Child
Theme URI: https://appyenterprise.co.uk/
Description: Universal AppyEPOS child theme for Hello Elementor.
Author: Appy Enterprise
Author URI: https://appyenterprise.co.uk/
Template: hello-elementor
Version: 1.0.0
Text Domain: appyepos-child
*/

/* Add site-specific custom styles below. */

/* =================================================
   SECTION PANELS
================================================= */

.pod-section{
  margin-top:24px;
  padding:16px 16px 18px;
  border:1px solid #e6e6e6;
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.pod-section:first-child{
  margin-top:0;
}

/* =================================================
   TITLES & SUBTEXT
================================================= */

#camper-pod-builder h2.pod-title{
  margin-bottom:4px !important;
}

.pod-title{
  font-family:"Aclonica",sans-serif;
  color:#1f5a44;
  letter-spacing:.3px;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}

.pod-subtext{
  font-size:12px;
  color:#666;
  margin-top:0;
  margin-bottom:12px;
  line-height:1.35;
}

/* remove Elementor spacing */

#camper-pod-builder .elementor-widget-heading,
#camper-pod-builder .elementor-widget-text-editor{
  margin-bottom:0 !important;
}

/* =================================================
   UNIVERSAL SWATCH GRID
   (Laminate / Fabric / Edge Trim)
================================================= */

.pod-swatch-group{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
}

@media (max-width:1024px){
  .pod-swatch-group{
    grid-template-columns:repeat(6,1fr);
  }
}

@media (max-width:768px){
  .pod-swatch-group{
    grid-template-columns:repeat(4,1fr);
  }
}

/* =================================================
   SWATCH STYLE
================================================= */

.pod-swatch{
  position:relative;
  width:100%;
  background:#fff;
  border:2px solid #e0e0e0;
  border-radius:6px; /* was 3px */
  padding:3px;
  cursor:pointer;
  transition:all .2s ease;
}

/* hover */
.pod-swatch:hover{
  border-color:#2e7d32;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* selected */
.pod-swatch:has(input:checked){
  border-color:#2e7d32;
  background:#f3faf4;
  box-shadow:0 0 0 2px rgba(46,125,50,0.15);
}

.pod-swatch input[type="radio"]{
  display:none;
}

.pod-swatch img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

/* hide labels for swatch sections */

.pod-laminate-section .swatch-label,
.pod-fabric-section .swatch-label,
.pod-edge-trim-section .swatch-label{
  display:none;
}

/* =================================================
   SELECTED STATE
================================================= */

.pod-swatch:has(input:checked){
  border-color:#2e7d32;
  transform:scale(1.03);
}

.pod-swatch::after{
  content:"✓";
  position:absolute;
  top:6px;
  right:6px;
  width:18px;
  height:18px;
  border-radius:4px;
  background:#2e7d32;
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.8);
  transition:all .2s ease;
}

.pod-swatch:has(input:checked)::after{
  opacity:1;
  transform:scale(1);
}

/* =================================================
   RANGE CARDS
================================================= */

.pod-range-section .pod-swatch-group{
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

@media (max-width:768px){

  .pod-range-section .pod-swatch-group{
    grid-template-columns:repeat(2,1fr);
  }

}

.pod-range-section .pod-swatch{
  width:auto;
  padding:10px 8px;
  border-radius:6px;
  text-align:center;
  display:flex;
  flex-direction:column;
}

.range-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.range-desc{
  font-size:12px;
  color:#555;
  line-height:1.35;
}

/* =================================================
   UPHOLSTERY CARDS
================================================= */

.pod-upholstery-section .pod-swatch-group{
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.pod-upholstery-section .pod-swatch{
  width:auto;
  padding:10px;
  border-radius:6px;
}

.pod-upholstery-section img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:4px;
  margin-bottom:8px;
}

.pod-upholstery-section .swatch-label{
  font-size:14px;
  font-weight:600;
  text-align:center;
}
@media (max-width:768px){

  .pod-upholstery-section .pod-swatch-group{
    grid-template-columns:repeat(2,1fr);
  }

}
/* =================================================
   FABRIC GROUP SEPARATION
================================================= */

#pod-fabric-group-2{
  display:none;
}

#pod-fabric-group-2.active{
  display:block;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #e6e6e6;
}

#pod-fabric-label-1,
#pod-fabric-label-2{
  font-size:13px;
  font-weight:600;
  color:#444;
  margin-bottom:6px;
}

/* =================================================
   COLLAPSED SWATCH GROUP (SHOW ALL SYSTEM)
================================================= */

.pod-swatch-group.picker-collapsed{
  overflow:hidden;
}

.pod-swatch-group.picker-collapsed .pod-swatch:nth-child(n+9){
  display:none;
}

@media (max-width:768px){

  .pod-swatch-group.picker-collapsed .pod-swatch:nth-child(n+5){
    display:none;
  }

}

/* =================================================
   SWATCH HEADER ROW (selected text + Show All)
================================================= */

.picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.picker-selected-label{
  font-size:12px;
  color:#333;
  flex:1;
}

/* =================================================
   SHOW ALL BUTTON (UPGRADED)
================================================= */

.pod-show-all-btn{
  background:#f0f7f2;              /* subtle green tint */
  border:1px solid #d6e8dc;
  border-radius:6px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  color:#2e7d32;                  /* your green tone */
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* icon effect */
.pod-show-all-btn::before{
  font-weight:700;
}

/* hover */
.pod-show-all-btn:hover{
  background:#e4f3e8;
  border-color:#bcdac4;
  color:#2e7d32 !important;
}

/* click */
.pod-show-all-btn:active{
  transform:scale(0.96);
}
.pod-swatch-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/* =================================================
   SUMMARY
================================================= */

.pod-summary{
  margin-top:25px;
  padding:20px;
  background:#ffffff;
  border-radius:10px;
  font-size:14px;
  border:1px solid #e5e5e5;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.pod-swatch-group{
  gap:12px; /* was 10 */
}

.pod-summary-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.pod-summary-row span{
  color:#555;
}

/* =================================================
   TOTAL
================================================= */

.pod-total-price{
  font-size:2.2rem;
  font-weight:700;
  color:#2e7d32;
  margin-top:.6rem;
}

/* =================================================
   PICKER PANEL
================================================= */

.global-picker{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:70vh;
  background:#fff;
  border-top:2px solid #ddd;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 -10px 30px rgba(0,0,0,.12);
  z-index:9999;
}

.global-picker.open{
  transform:translateY(0);
}

.global-picker-inner{
  height:100%;
  overflow-y:auto;
  padding:18px;
}


/* =================================================
   PICKER GRID
================================================= */

#picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,70px);
  gap:12px;
  padding-bottom:40px;
}

#picker-grid .pod-swatch{
  padding:4px;
}

#picker-grid img{
  border-radius:4px;
}

#picker-grid .swatch-label{
  font-size:12px;
  line-height:1.2;
  text-align:center;
  margin-top:4px;
  color:#444;
}


/* =================================================
   PICKER TOOLBAR (Search + Close)
================================================= */

.picker-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

/* search */

.picker-search{
  flex:1;
  max-width:300px;
  height:34px;
  padding:6px 10px;
  font-size:13px;
  border:1px solid #d9d9d9;
  border-radius:6px;
}

/* close button */

#picker-close{
  height:34px;
  padding:0 14px;
  font-size:13px;
  border-radius:6px;
  border:none;
  background:#004D0A;
  color:#fff;
  cursor:pointer;
}

#picker-close:hover{
  background:#003b08;
}


/* =================================================
   PICKER TABS
================================================= */

.picker-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid #e6e6e6;
}

.picker-tab{
  padding:6px 12px;
  font-size:13px;
  font-weight:500;
  border-radius:5px;
  border:1px solid #d9d9d9;
  background:#fff;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}

.picker-tab:hover{
  border-color:#004D0A;
  color:#004D0A;
}

.picker-tab.active{
  background:#004D0A;
  color:#fff;
  border-color:#004D0A;
}




/* ======================================================
   ERROR MESSAGE
====================================================== */

.config-error-section{
  border:2px solid #d33 !important;
}

.config-section-error{
  display:none;
  background:#ffe9e9;
  color:#a10000;
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
  margin-bottom:10px;
}


/* ======================================================
   UPGRADES + LASER LAYOUT
====================================================== */

/* hide the checkbox but keep functionality */

.pod-upgrade-swatch input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* 3 across grid */

.pod-upgrade-section .pod-swatch-group,
.pod-laser-section .pod-swatch-group{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

/* tile sizing */

.pod-upgrade-section .pod-swatch,
.pod-laser-section .pod-swatch{
  width:100%;
  text-align:center;
}

/* image sizing */

.pod-upgrade-section .pod-swatch img,
.pod-laser-section .pod-swatch img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:4px;
}

/* label spacing */

.pod-upgrade-section .swatch-label,
.pod-laser-section .swatch-label{
  display:block;
  margin-top:6px;
  font-size:14px;
}
.pod-upgrade-section .swatch-label{
  min-height:36px;
}
/* =================================================
   Pod EXTRAS
================================================= */
.pod-extras-section .pod-swatch-group{
  grid-template-columns:repeat(3,1fr);
}

.pod-extras-section .pod-swatch img{
  height:120px;
}

.pod-extras-section input[type="checkbox"]{
  display:none;
}

.pod-extras-section .pod-swatch{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.pod-extras-section .swatch-label{
  display:block;
  margin-top:6px;
  font-size:14px;
  text-align:center;
}

.pod-extras-section .pod-swatch img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:4px;
}
/* =================================================
   ADD TO CART BUTTON (REFINED)
================================================= */

.single_add_to_cart_button.button.alt{
  background:#C7852A;
  color:#fff;
  border:none;

  margin-top:18px !important;
  border-radius:8px;

  padding:16px 22px !important;

  font-size:19px;
  font-weight:700;
  line-height:1.2;

  cursor:pointer;

  transition:all .2s ease;

  box-shadow:0 4px 14px rgba(0,0,0,.12);

  width:100%;
}

/* hover */
.single_add_to_cart_button.button.alt:hover {
  background: #b37422 !important; /* darker gold */
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Active */
.single_add_to_cart_button.button.alt:active {
  background: #b37422 !important;
  color: #fff !important;
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Disabled */
.single_add_to_cart_button.button.alt:disabled,
.single_add_to_cart_button.button.alt.disabled {
  background: #9fa6a1 !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Arrow */
.single_add_to_cart_button.button.alt::after {
  content: " →";
  margin-left: 6px;
  transition: margin .2s ease;
}

.single_add_to_cart_button.button.alt:hover::after {
  margin-left: 10px;
}

/* ======================================
   MOBILE SUMMARY BAR
====================================== */

.mobile-summary-wrapper{
  display:none;
}

@media (max-width:768px){

.mobile-summary-wrapper{
  display:block;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
}

/* bottom bar */

.mobile-summary-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;

  background:#f3f3f3;
  border-top:2px solid #004D0A;

  box-shadow:0 -4px 12px rgba(0,0,0,.15);
}

/* price */

#mobile-summary-price{
  font-size:18px;
  font-weight:700;
  color:#c00;
}

/* buttons */

.mobile-summary-actions{
  display:flex;
  gap:8px;
}

#toggle-summary{
  background:#fff;
  border:1px solid #cfcfcf;
  border-radius:6px;
  padding:8px 12px;
  font-size:13px;
  color:#333;
}
#mobile-add-to-cart{
  background:#004D0A;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:8px 14px;
  font-size:13px;
}

/* ======================================
   SLIDE PANEL
====================================== */

.mobile-summary-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  background:#fff;
  padding:16px;

  transform:translateY(100%);
  transition:transform .35s ease;

  max-height:70vh;
  overflow:auto;

  box-shadow:0 -10px 30px rgba(0,0,0,.2);
}

/* OPEN STATE */

.mobile-summary-panel.open{
  transform:translateY(0);
}
/* ======================================
   MOBILE SUMMARY PANEL HEADER
====================================== */

.mobile-summary-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid #eee;
}

#mobile-summary-close{
  background:#eee;
  color:#333 !important;
  border:1px solid #ccc;
  border-radius:6px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}

#mobile-summary-close:hover{
  background:#ddd;
  color:#333 !important;
}
/* ======================================
   MOBILE SUMMARY OVERLAY
====================================== */

#mobile-summary-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:998;
}

#mobile-summary-overlay.active{
  opacity:1;
  pointer-events:auto;
}
}
/* ======================================
   Configurator Step Numbers
====================================== */

#camper-pod-builder{
counter-reset: podStep;
}

/* each visible section increments step */
#camper-pod-builder .pod-section{
counter-increment: podStep;
}

/* title layout */

#camper-pod-builder .pod-title{
display:flex;
align-items:center;
gap:12px;
flex:1;

font-family:"Aclonica", sans-serif;
font-size:18px;
font-weight:600;
line-height:1.2;
margin:0;
}

#camper-pod-builder .config-step{
display:inline-flex;
align-items:center;
justify-content:center;

width:32px;
height:32px;

background:#2e7d32;
color:#ffffff;

font-size:15px;
font-weight:600;

border-radius:5px;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,.1);
}
/* insert the number */

#camper-pod-builder .config-step::before{
content: counter(podStep);
}


/* ======================================
   POPUP ICON
====================================== */
.config-section-title{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
flex-wrap:nowrap;
margin-bottom:10px;
}

.config-help{
display:flex;
align-items:center;
justify-content:center;

width:22px;
height:22px;

background:#2e7d32;
color:#fff;

border-radius:50%;

font-size:18px;
font-weight:700;

text-decoration:none;
cursor:pointer;

flex-shrink:0;
}


/* ======================================================
   SUPPORT POD (CLEAN + STABLE)
====================================================== */

/* hidden until range selected */
#pod-support-container{
  display:none;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #e5e5e5;
}

/* active */
#pod-support-container.active{
  display:block;
}


/* ======================================
   TOP ROW (IMAGE + TEXT)
====================================== */

.pod-support-top{
  display:flex;
  gap:20px;
  align-items:flex-start;
  width:100%;
}

/* image */
.pod-support-image{
  flex:0 0 160px;
}

.pod-support-image img{
  width:100%;
  height:auto;
  border-radius:6px;
  display:block;
}

/* text */
.pod-support-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

.pod-support-title{
  margin:0 0 6px;
  font-size:18px;
  font-weight:600;
}

.pod-support-description{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:#555;

  /* prevents overflow */
  word-break:break-word;
  overflow-wrap:break-word;
}


/* ======================================
   OPTIONS (BUTTONS)
====================================== */

.pod-support-options{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pod-support-option input{
  display:none;
}

.pod-support-box{
  padding:8px 12px;
  border:2px solid #d9d9d9;
  border-radius:8px;
  font-weight:600;
  background:#fff;
  cursor:pointer;
  text-align:center;
  transition:all .2s ease;
}

.pod-support-box:hover{
  border-color:#4c7c3c;
}

.pod-support-option input:checked + .pod-support-box{
  border-color:#4c7c3c;
  background:#eaf3e6;
}


/* ======================================
   MESSAGE
====================================== */

.pod-support-message{
  margin-top:8px;
  font-size:14px;
  color:#2f6f3e;
  display:block;
}


/* ======================================
   MOBILE FIX (SIDE BY SIDE ALWAYS)
====================================== */

@media (max-width:768px){

  .pod-support-top{
    display:flex;
    flex-direction:row; /* FORCE side-by-side */
    gap:10px;
    align-items:flex-start;
  }

  /* smaller image */
  .pod-support-image{
    flex:0 0 35%;
  }

  /* text gets more room */
  .pod-support-content{
    flex:1;
  }

  /* tighten text */
  .pod-support-description{
    font-size:13px;
    line-height:1.35;
  }

}

/* ======================================
   FIX: EXTRAS MOBILE GRID
====================================== */

@media (max-width:768px){

  .pod-extras-section .pod-swatch-group{
    grid-template-columns:repeat(2,1fr) !important;
  }

}
/* highlight */
.pod-section.attention{
  border:2px solid #d32f2f;
  box-shadow:0 0 0 4px rgba(211,47,47,0.2);
  transition:all 0.3s ease;
}

/* message popup */
#config-msg{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#d32f2f;
  color:#fff;
  padding:12px 20px;
  border-radius:6px;
  font-weight:600;
  opacity:0;
  transition:all 0.3s ease;
  z-index:9999;
}

#config-msg.show{
  opacity:1;
}


.pod-section.disabled{
  opacity:0.4;
}

/* ======================================
   PRICE THUMB
====================================== */


.pod-range-swatch{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.range-price{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#2e7d32;
}

.swatch-price-inline{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#2e7d32;
  text-align:center;
}

/* ======================================
   WAX SECTION (BIGGER THUMBS)
====================================== */

.pod-wax-section .pod-swatch-group{
  grid-template-columns:repeat(4,1fr); /* was 8 */
  gap:14px;
}

@media (max-width:768px){
  .pod-wax-section .pod-swatch-group{
    grid-template-columns:repeat(2,1fr);
  }
}
/* ======================================
   WAX SECTION ALIGNMENT FIX
====================================== */

.pod-wax-section .pod-swatch{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* label */
.pod-wax-section .swatch-label{
  text-align:center;
  font-size:14px;
  font-weight:600;
  margin-top:6px;
}

/* price */
.pod-wax-section .swatch-price-inline{
  text-align:center;
}

.pod-waxFinish-swatch img {
  width: 100%;
  height: auto;
  display: block;
}

.pod-waxFinish-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
}