/* addons.css: the product page's "Add to your order" tick-box (a petticoat beside a saree), and
   the same tick-box inside the Custom size form. Markup in shop/product.php (#pdAddons) and
   shop/_custom_sizing.php (#csAddonRow), drawn by addons.js. Loaded only on a page that offers
   add-ons, so style.css is not touched; it uses the theme's own colour variables, so it follows
   the shop's colour. The look matches the Standard / Custom size cards (custom-sizing.css). */

.ad-box{margin-top:1.25rem;}
.ad-title{
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .55rem;
}
.ad-list{display:grid;gap:.6rem;}

.ad-choice{
  position:relative;display:flex;align-items:flex-start;gap:.65rem;margin:0;
  padding:.75rem .85rem;background:#fff;cursor:pointer;
  border:1px solid rgba(31,27,46,.16);border-radius:.9rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ad-choice input{position:absolute;opacity:0;pointer-events:none;}
/* The tick-box, drawn here since the input itself is hidden. */
.ad-choice::before{
  content:"";flex:none;width:1.15rem;height:1.15rem;margin-top:.1rem;border-radius:.3rem;
  border:2px solid rgba(31,27,46,.3);background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.ad-choice:hover{border-color:var(--violet);}
.ad-choice:focus-within{outline:2px solid var(--violet);outline-offset:2px;}
.ad-choice.is-on{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet);}
.ad-choice.is-on::before{
  border-color:var(--violet);background:var(--violet);
  /* the tick */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size:100% 100%;
}

.ad-choice-body{flex:1;min-width:0;}
.ad-choice-title{display:block;font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.3;}
.ad-fee{margin-left:.25rem;font-weight:700;color:var(--violet);white-space:nowrap;}
.ad-old{color:var(--muted);font-weight:400;font-size:.8rem;}
.ad-choice-sub{display:block;margin-top:.1rem;font-size:.78rem;line-height:1.35;color:var(--muted);}

/* The colour / size choice, only while the add-on is ticked. */
.ad-pick{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 0 1.8rem;}
.ad-pick[hidden]{display:none;}
.ad-pick-label{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.ad-select{max-width:14rem;}

/* The same tick-box inside the Custom size form, in front of the petticoat measurements. */
.cs-addon-row{margin:0 0 .75rem;}
.cs-addon-row[hidden]{display:none;}
.ad-choice--mini{padding:.65rem .8rem;}