/* Straws.my Custom — front-end styles for plugin blocks.
   Design tokens are defined in the child theme (:root). Fallbacks included.
   Layout is centre-aligned to match the child theme. */

:root {
  --straws-orange: #f7941e;
  --straws-green:  #7cb63a;
  --straws-notice-bg: #2f4f2f;
}

/* ---- Buttons (mirror child theme, so blocks work even if theme CSS lags) ---- */
.straws-btn{display:inline-block;padding:.95em 2em;border-radius:2px;font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;text-align:center;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.straws-btn--primary{background:var(--straws-orange);color:#fff;border:1px solid var(--straws-orange);box-shadow:0 6px 18px rgba(247,148,30,.28)}
.straws-btn--primary:hover{background:#e08416;color:#fff;transform:translateY(-1px)}
.straws-btn--outline{background:#fff;color:var(--straws-orange);border:1px solid var(--straws-green)}
.straws-btn--outline:hover{background:var(--straws-green);color:#fff;transform:translateY(-1px)}
.straws-btn--block{display:block;width:100%}

/* ---- CTA pair (centred; side-by-side on desktop, stacked on mobile) ---- */
.straws-ctas{margin:1.75rem auto 0;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center}
.straws-ctas .straws-btn{flex:0 0 auto}
.straws-ctas__shopee{flex:1 0 100%;text-align:center;color:#747474;margin:.5rem 0 0}

/* ---- Cert badges ---- */
.straws-badges{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:1.75rem auto 0;max-width:760px}
.straws-badge{flex:1 1 150px;max-width:180px;text-align:center;padding:1.4rem 1rem;border:1px solid #e8ebe2;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.straws-badge__big{display:block;font-size:1.9rem;font-weight:700;color:var(--straws-green);font-family:"Antic Slab",Georgia,serif;line-height:1}
.straws-badge__cap{display:block;color:#747474;font-size:.9rem;margin-top:.4rem}

/* ---- Feature cards ("Why Businesses Choose Us") ---- */
.straws-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:2rem auto 0;max-width:1000px;text-align:center}
.straws-card{padding:1.75rem 1.25rem;border:1px solid #e8ebe2;border-radius:10px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease}
.straws-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.straws-card__title{margin:0 0 .5rem;font-size:1.2rem;color:var(--straws-green);font-family:"Antic Slab",Georgia,serif}
.straws-card__text{margin:0;color:#747474}
.straws-card__icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto 1rem;border-radius:50%;background:rgba(124,182,58,.12);color:var(--straws-green)}
.straws-card__icon svg{width:27px;height:27px}

/* ---- Image slots ([straws_figure]) + galleries ---- */
.straws-figure{margin:1.75rem auto 0;max-width:860px;border-radius:12px;overflow:hidden;
  background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.straws-figure img{display:block;width:100%;height:auto}
.straws-figure--16x9 img{aspect-ratio:16/9;object-fit:cover}
.straws-figure--4x3 img{aspect-ratio:4/3;object-fit:cover}
.straws-figure--3x2 img{aspect-ratio:3/2;object-fit:cover}
.straws-figure--1x1 img{aspect-ratio:1/1;object-fit:cover}
.straws-figure figcaption{padding:.6rem 1rem;font-size:.85rem;color:#777;text-align:center}
.straws-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:960px;margin:1.75rem auto 0}
.straws-gallery .straws-figure{margin:0;max-width:none}
@media(max-width:768px){.straws-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.straws-gallery{grid-template-columns:1fr}}

/* ---- Sizes list (centred card) ---- */
.straws-sizes{list-style:none;padding:0;margin:1.5rem auto 0;max-width:640px;text-align:left;
  border:1px solid #e8ebe2;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04);background:#fff}
.straws-sizes li{padding:.8rem 1.1rem;border-bottom:1px solid #eef0e9}
.straws-sizes li:last-child{border-bottom:0}
.straws-sizes li:nth-child(odd){background:#fafcf6}
.straws-sizes__note{font-size:.85rem;color:#999;text-align:center;margin-top:.6rem}

/* ---- Ban warning (dark section) ---- */
.straws-ban{background:var(--straws-notice-bg);color:#fff;margin:0}
.straws-ban__inner{max-width:760px;margin:0 auto;padding:4rem 1.5rem;text-align:center}
.straws-ban__inner h2{color:#fff;margin-top:0}
.straws-ban__inner h2::after{background:var(--straws-orange)!important}
.straws-ban__inner p{color:rgba(255,255,255,.92)}
.straws-ban .straws-ctas{margin-left:auto;margin-right:auto}
.straws-ban .straws-btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.straws-ban .straws-btn--outline:hover{background:#fff;color:var(--straws-notice-bg);border-color:#fff}

/* ---- Testimonials ---- */
.straws-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin:2rem auto 0;max-width:900px;text-align:left}
.straws-quote{margin:0;padding:1.75rem;border:1px solid #e8ebe2;border-top:3px solid var(--straws-green);border-radius:10px;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.straws-quote p{margin:0 0 .75rem;font-style:italic;color:#555}
.straws-quote cite{color:#2f3a2a;font-style:normal;font-weight:700}

/* ---- Company / legal line (footer) ---- */
.straws-company{font-size:.85rem;line-height:1.8;color:#666;text-align:center}
.straws-company a{color:var(--straws-green);text-decoration:none}

/* ---- Lead form (centred card) ---- */
.straws-form{max-width:560px;margin:2rem auto 0;text-align:left;background:#fff;border:1px solid #e8ebe2;
  border-radius:12px;padding:1.75rem;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.straws-form label{display:block;font-weight:700;color:#555;margin-bottom:1rem}
.straws-form input[type=text],.straws-form textarea{width:100%;margin-top:.35rem;padding:.7em;border:1px solid #ccc;border-radius:4px;font:inherit}
.straws-form input[type=text]:focus,.straws-form textarea:focus{outline:none;border-color:var(--straws-green);box-shadow:0 0 0 3px rgba(124,182,58,.15)}
.straws-form .straws-btn{margin-top:.5rem}
.straws-form .straws-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.straws-form__notice--ok{background:#eef7e3;border:1px solid var(--straws-green);padding:.75rem 1rem;border-radius:4px;color:#3f6a16;margin-bottom:1rem}
.straws-form__notice--err{background:#fdecea;border:1px solid #e23b3b;padding:.75rem 1rem;border-radius:4px;color:#b3261e;margin-bottom:1rem}
.straws-req{color:#e23b3b;font-weight:700}

/* ---- Top notice bar ---- */
.straws-notice{background:var(--straws-notice-bg);color:#fff;font-size:.85rem}
.straws-notice__inner{max-width:1080px;margin:0 auto;padding:.6rem 1.5rem;display:flex;gap:1rem;align-items:center;justify-content:center;text-align:center}
.straws-notice a{color:#ffd37a;text-decoration:underline}
.straws-notice__close{background:none;border:0;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;margin-left:auto}

.straws-notice--hidden{display:none}

/* ---- Floating WhatsApp button ---- */
.straws-wa{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:.5rem;
  background:#25d366;color:#fff;padding:10px 16px;border-radius:40px;text-decoration:none;
  box-shadow:0 3px 12px rgba(0,0,0,.25)}
.straws-wa:hover{color:#fff;background:#1fbe5a}
.straws-wa__label{font-size:.85rem;font-weight:700;white-space:nowrap}
.straws-wa__icon{display:flex}

/* ---- Responsive ---- */
@media (max-width:980px){
  .straws-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .straws-ctas .straws-btn{flex:1 1 100%}        /* full-width stacked CTAs on phones */
}
@media (max-width:600px){
  .straws-cards{grid-template-columns:repeat(2,1fr);gap:.75rem}   /* 2 per row on mobile */
  .straws-card{padding:1.25rem 1rem}
  .straws-quotes{grid-template-columns:1fr}
  .straws-badges{gap:.6rem}
  .straws-badge{flex:1 1 42%}
  .straws-wa__label{display:none}         /* icon-only on phones */
  .straws-wa{padding:12px;border-radius:50%}
  .straws-notice__inner{font-size:.78rem}
}