/* =========================================
   KIDU OFFER SECTION - base structural CSS
   (colors are injected per-section via inline <style>)
========================================= */

.kidu-offer-section{
  width:100%;
  padding:35px 20px;
  box-sizing:border-box;
  overflow:hidden;
}

.kidu-offer-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* HEADING */
.kidu-offer-heading{ text-align:center; margin-bottom:20px; }
.kidu-offer-tag{
  display:inline-block;
  padding:4px 13px;
  margin-bottom:6px;
  border:1px solid;
  border-radius:50px;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.5px;
}
.kidu-offer-heading h2{ margin:0; font-family:Georgia,serif; font-size:30px; line-height:1.2; }
.kidu-offer-heading p{ margin:5px 0 0; font-size:13px; }

/* BOX GRID */
.kidu-offer-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
}

/* BOX */
.kidu-price-box{
  position:relative;
  min-width:0;
  min-height:245px;
  padding:18px 14px;
  box-sizing:border-box;
  border:1px solid;
  border-radius:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:1;
  transform:none;
}
.kidu-offer-section.kidu-anim .kidu-price-box{
  opacity:0;
  transform:translateY(24px);
  transition:transform .6s ease, box-shadow .3s ease, border-color .3s ease, opacity .6s ease;
}
.kidu-offer-section.kidu-anim .kidu-price-box.kidu-in-view{
  opacity:1;
  transform:translateY(0);
}
.kidu-offer-section:not(.kidu-no-hover) .kidu-price-box:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
.kidu-offer-section.kidu-anim:not(.kidu-no-hover) .kidu-price-box.kidu-in-view:hover{
  transform:translateY(-6px);
}
.kidu-price-box.featured{ border-width:2px; }

/* ICON */
.kidu-radio{
  width:48px; height:48px; min-width:48px;
  margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid;
  border-radius:50%;
  overflow:hidden;
  font-size:22px; line-height:1;
  transition:.3s ease;
}
.kidu-offer-section:not(.kidu-no-hover) .kidu-price-box:hover .kidu-radio{
  transform:scale(1.08);
}

/* POPULAR BADGE */
.kidu-best{ position:absolute; top:0; right:0; padding:5px 10px; font-size:8px; font-weight:700; }

/* TEXT */
.kidu-offer-label{ font-size:9px; letter-spacing:1.5px; font-weight:700; margin-bottom:5px; }
.kidu-price-box h3{ margin:0 0 5px; font-size:25px; line-height:1.2; font-weight:600; }
.kidu-price-box strong{ display:block; max-width:230px; font-size:15px; line-height:1.35; font-weight:600; }
.kidu-worth{ display:block; margin-top:6px; font-size:11px; font-weight:600; }

/* GIFT TAGS */
.kidu-gift-list{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; width:100%; margin-top:7px; }
.kidu-gift-list span{ display:inline-block; padding:4px 7px; border-radius:20px; font-size:8px; line-height:1.2; white-space:normal; transition:transform .3s ease; }
.kidu-offer-section:not(.kidu-no-hover) .kidu-price-box:hover .kidu-gift-list span{ transform:translateY(-2px); }

/* BOTTOM LABEL */
.kidu-saving{ width:100%; margin-top:auto; padding-top:10px; border-top:1px solid #DDD; font-size:9px; font-weight:700; letter-spacing:1px; text-align:left; }

/* COUPON BOX */
.kidu-coupon-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:15px;
  padding:20px 22px;
  box-sizing:border-box;
  border-radius:12px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  opacity:1; transform:none;
}
.kidu-offer-section.kidu-anim .kidu-coupon-box{
  opacity:0; transform:translateY(24px);
  transition:transform .6s ease, opacity .6s ease;
}
.kidu-offer-section.kidu-anim .kidu-coupon-box.kidu-in-view{ opacity:1; transform:translateY(0); }

.kidu-coupon-icon{ width:52px; height:52px; min-width:52px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:22px; overflow:hidden; }
.kidu-coupon-content{ flex:1; min-width:0; }
.kidu-coupon-small{ display:block; font-size:8px; letter-spacing:1.5px; font-weight:800; }
.kidu-coupon-content h3{ margin:4px 0 8px; font-size:18px; }
.kidu-coupon-rules{ display:flex; align-items:center; gap:15px; }
.kidu-coupon-rules div:not(.kidu-divider){ display:flex; flex-direction:column; gap:2px; }
.kidu-coupon-rules strong{ font-size:15px; }
.kidu-coupon-rules span{ font-size:10px; }
.kidu-divider{ width:1px; height:30px; }
.kidu-coupon-content p{ max-width:700px; margin:7px 0 0; font-size:10px; line-height:1.4; }

/* SHOP BUTTON */
.kidu-shop-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:9px; padding:8px 18px;
  border-radius:30px;
  text-decoration:none !important;
  font-size:9px; font-weight:800; letter-spacing:1px;
  transition:.3s ease;
}
.kidu-offer-section:not(.kidu-no-hover) .kidu-shop-btn:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.kidu-shop-btn span{ font-size:14px; }

/* BADGE CIRCLE */
.kidu-coupon-badge{ width:72px; height:72px; min-width:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed; border-radius:50%; transform:rotate(5deg); }
.kidu-coupon-badge span{ font-size:8px; }
.kidu-coupon-badge strong{ font-size:15px; }

/* =========================================
   MOBILE — 3 boxes stay in one row, everything scales down
========================================= */
@media(max-width:600px){
  .kidu-offer-section{ padding:18px 5px; }
  .kidu-offer-heading{ margin-bottom:12px; }
  .kidu-offer-tag{ padding:3px 9px; margin-bottom:4px; font-size:7px; }
  .kidu-offer-heading h2{ font-size:21px; }
  .kidu-offer-heading p{ font-size:10px; }

  .kidu-offer-options{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }

  .kidu-price-box{ height:auto; min-height:185px; padding:8px 4px; overflow:hidden; }

  .kidu-radio{ width:32px; height:32px; min-width:32px; margin-bottom:5px; font-size:16px; }
  .kidu-best{ padding:3px 5px; font-size:5px; }
  .kidu-offer-label{ font-size:6.5px; letter-spacing:.3px; margin-bottom:4px; white-space:nowrap; }
  .kidu-price-box h3{ font-size:17px; margin:0 0 5px; white-space:nowrap; }
  .kidu-price-box strong{ width:100%; max-width:100%; padding:0 2px; font-size:9px; line-height:1.3; box-sizing:border-box; }
  .kidu-worth{ margin-top:4px; font-size:7px; white-space:nowrap; }

  .kidu-gift-list{ width:100%; max-width:100%; gap:3px; margin-top:5px; overflow:visible; }
  .kidu-gift-list span{ padding:3px 4px; font-size:6px; line-height:1.2; white-space:normal; text-align:center; }

  .kidu-saving{ padding-top:6px; font-size:5.5px; letter-spacing:0; white-space:nowrap; }

  .kidu-coupon-box{ margin-top:10px; padding:13px 8px; gap:6px; flex-direction:column; text-align:center; border-radius:9px; }
  .kidu-coupon-icon{ width:44px; height:44px; min-width:44px; border-radius:9px; font-size:19px; }
  .kidu-coupon-small{ font-size:7px; line-height:1.2; letter-spacing:.9px; margin-bottom:3px; }
  .kidu-coupon-content h3{ margin:3px 0 7px; font-size:16px; line-height:1.25; font-weight:700; }
  .kidu-coupon-rules{ justify-content:center; align-items:center; gap:12px; }
  .kidu-coupon-rules div:not(.kidu-divider){ gap:2px; }
  .kidu-coupon-rules strong{ font-size:13px; line-height:1.1; }
  .kidu-coupon-rules span{ font-size:8px; line-height:1.2; }
  .kidu-divider{ width:1px; height:25px; }
  .kidu-coupon-content p{ width:100%; max-width:330px; margin:7px auto 0; font-size:8px; line-height:1.4; }
  .kidu-shop-btn{ margin-top:7px; padding:8px 17px; font-size:8.5px; line-height:1; gap:6px; }
  .kidu-shop-btn span{ font-size:13px; }
  .kidu-coupon-badge{ width:54px; height:54px; min-width:54px; border-width:1.5px; margin-top:1px; }
  .kidu-coupon-badge span{ font-size:6px; line-height:1.1; }
  .kidu-coupon-badge strong{ font-size:12px; line-height:1.1; }
}

@media(max-width:360px){
  .kidu-price-box strong{ font-size:8px; }
  .kidu-price-box h3{ font-size:15px; }
}