/* =======================================================================
   Global color variables and shared options
   ======================================================================= */
:root{
  --oso-accent:  #b57a57;   /* One Step Order primary CTA color */
  --oso-ink:     #1f2937;   /* Primary text */
  --oso-muted:   #6b7280;   /* Secondary text */
  --oso-line:    #e5e7eb;   /* Borders / dividers */
  --oso-soft:    #f8fafc;   /* Soft backgrounds */
  --oso-card:    #ffffff;   /* Card background */
  --oso-shadow:  0 10px 22px rgba(0,0,0,.06);

  /* Quantity badge */
  --oso-badge-bg: #ef4444;
  --oso-badge-fg: #ffffff;

  /* Shipping states */
  --oso-free-bg: #ecfdf5;  --oso-free-bd: #a7f3d0;  --oso-free-fg: #065f46;
  --oso-paid-bg: var(--oso-soft); --oso-paid-bd: var(--oso-line); --oso-paid-fg: var(--oso-ink);
  --oso-pending-bg: #f3f4f6; --oso-pending-bd: #e5e7eb; --oso-pending-fg: #6b7280;

  /* Legacy aliases (keeps older markup working) */
  --rtg-accent: var(--oso-accent);
  --rtg-ink:    var(--oso-ink);
  --rtg-muted:  var(--oso-muted);
  --rtg-line:   var(--oso-line);
  --rtg-soft:   var(--oso-soft);
  --rtg-card:   var(--oso-card);
  --rtg-shadow: var(--oso-shadow);
  --rtg-badge-bg: var(--oso-badge-bg);
  --rtg-badge-fg: var(--oso-badge-fg);
  --rtg-free-bg: var(--oso-free-bg);
  --rtg-free-bd: var(--oso-free-bd);
  --rtg-free-fg: var(--oso-free-fg);
  --rtg-paid-bg: var(--oso-paid-bg);
  --rtg-paid-bd: var(--oso-paid-bd);
  --rtg-paid-fg: var(--oso-paid-fg);
  --rtg-pending-bg: var(--oso-pending-bg);
  --rtg-pending-bd: var(--oso-pending-bd);
  --rtg-pending-fg: var(--oso-pending-fg);
}

/* Hide WooCommerce default add-to-cart button */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button{
  display:none !important;
}

/* Utility: forcefully hide element */
.oso-hidden,
.rtg-hidden{
  display:none !important;
}


/* =======================================================================
   “Order Now” form — container, fields, and CTA button
   ======================================================================= */
.oso-quick-box,
.rtg-quick-box{
  width:100%;
  margin:16px 0;
  padding:18px;
  background:var(--oso-card);
  border:1px solid var(--oso-line);
  border-radius:16px;
  box-shadow:var(--oso-shadow);
}
.oso-note,
.rtg-note{
  margin:0 0 12px;
  text-align:center;
  font-weight:700;
  color:var(--oso-ink);
}
.oso-field,
.rtg-field{
  width:100%;
  margin:10px 0;
  padding:12px 14px;
  background:#fff;
  color:var(--oso-ink);
  border:1px solid var(--oso-line);
  border-radius:10px;
  outline:0;
  transition:border-color .15s, box-shadow .15s;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.oso-field::placeholder,
.rtg-field::placeholder{ color:#9ca3af; }
.oso-field:focus,
.rtg-field:focus{
  border-color: color-mix(in srgb, var(--oso-accent) 45%, #ffffff);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--oso-accent) 18%, transparent);
}
/* Phone number alignment */
.single-product form.cart input[name="oso_phone"],
.single-product form.cart input[name="rtg_phone"]{
  text-align:right;
}

/* Submit button */
.oso-submit,
.rtg-submit{
  width:100%;
  margin-top:12px;
  padding:.95rem 1rem;
  border:0; border-radius:12px;
  background:var(--oso-accent); color:#fff;
  font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px color-mix(in srgb, var(--oso-accent) 28%, transparent);
  transition:filter .15s;
}
.oso-submit:hover,
.rtg-submit:hover{ filter:brightness(1.05); }

/* Ensure both cards span full width */
.single-product form.cart .oso-quick-box,
.single-product form.cart .oso-summary,
.single-product form.cart .rtg-quick-box,
.single-product form.cart .rtg-summary{
  width:100% !important;
  max-width:100% !important;
  inline-size:100% !important;
  box-sizing:border-box;
}
.single-product form.cart{ align-items:stretch; }


/* =======================================================================
   Order summary card — collapsible section
   ======================================================================= */
.oso-summary,
.rtg-summary{
  margin:16px 0;
  background:var(--oso-card);
  border:1px solid var(--oso-line);
  border-radius:16px;
  box-shadow:var(--oso-shadow);
  overflow:hidden;
  direction:rtl;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Summary header */
.oso-sum-head,
.rtg-sum-head{
  position:relative;
  display:flex; align-items:center; gap:8px;
  justify-content:flex-start;
  padding:14px 16px;
  padding-inline-start:48px;
  padding-inline-end:16px;
  font-weight:800; color:var(--oso-ink);
  background:linear-gradient(to left, var(--oso-soft), #fff);
  border-bottom:1px solid var(--oso-line);
  user-select:none; cursor:pointer;
}
.oso-sum-head:focus,
.rtg-sum-head:focus{ outline:none; }
.oso-sum-head:focus-visible,
.rtg-sum-head:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oso-accent) 25%, transparent) inset;
  border-radius:8px;
}

/* Header icons */
.oso-icon,
.rtg-icon{ display:inline-flex; align-items:center; justify-content:center; }

.oso-icon.oso-cart,
.rtg-icon.rtg-cart{
  position:absolute;
  inset-inline-start:14px;
  top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:8px;
  background: color-mix(in srgb, var(--oso-accent) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--oso-accent) 28%, #eee);
  color:#0b66ff;
  margin:0 !important;
}
[dir="rtl"] .oso-icon.oso-cart,
[dir="rtl"] .rtg-icon.rtg-cart{
  right:14px; left:auto;
}
.oso-icon.oso-chevron,
.rtg-icon.rtg-chevron{
  position:absolute;
  inset-inline-end:16px;
  top:50%; transform:translateY(-50%);
  color:var(--oso-muted);
  transition:transform .2s ease;
  margin:0 !important;
}
.oso-summary.is-collapsed .oso-icon.oso-chevron svg,
.rtg-summary.is-collapsed .rtg-icon.rtg-chevron svg{
  transform:translateY(0) rotate(180deg);
}

/* Product title inside header */
.oso-head-label,
.rtg-head-label{
  white-space:nowrap;
  color:var(--oso-ink);
}
.oso-sum-head .oso-title,
.rtg-sum-head .rtg-title{
  margin:0 !important;
  font-weight:700; color:var(--oso-ink);
  flex:1 1 auto; max-width:65%;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
@media (max-width:480px){
  .oso-sum-head .oso-title,
  .rtg-sum-head .rtg-title{ max-width:60%; }
}

/* Summary body (collapsible) */
.oso-sum-body,
.rtg-sum-body{
  overflow:hidden;
  max-height:1000px;
  opacity:1;
  transition:max-height .25s ease, opacity .2s ease;
}
.oso-summary.is-collapsed .oso-sum-body,
.rtg-summary.is-collapsed .rtg-sum-body{
  max-height:0; opacity:0; pointer-events:none;
}

/* Summary rows */
.oso-sum-row,
.rtg-sum-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-top:1px dashed var(--oso-line);
}
.oso-sum-row:first-of-type,
.rtg-sum-row:first-of-type{ border-top:0; }
.oso-sum-label,
.rtg-sum-label{
  flex:1 1 auto; min-width:0;
  text-align:right; color:var(--oso-muted);
  overflow-wrap:anywhere;
}
.oso-sum-value,
.rtg-sum-value{
  flex:0 0 auto; min-width:0;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; text-align:left; color:var(--oso-ink);
}

/* price × quantity line */
.oso-sum-row:first-child .oso-sum-value,
.rtg-sum-row:first-child .rtg-sum-value{ gap:0; }
.oso-ltr,
.rtg-ltr{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}
.oso-op,
.rtg-op{ opacity:.6; }
.oso-unit-x-qty,
.rtg-unit-x-qty{ opacity:.9; font-size:13px; }
.oso-unit-x-qty strong,
.rtg-unit-x-qty strong{ font-weight:800; }
.oso-subtotal,
.rtg-subtotal{ font-weight:600; }
.oso-subtotal:empty,
.rtg-subtotal:empty{ display:none; }
.oso-num,
.rtg-num{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

/* Quantity badge */
.oso-qty-badge,
.rtg-qty-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:1.25rem; min-width:1.25rem; padding:0 .45rem;
  border-radius:999px;
  background:var(--oso-badge-bg); color:var(--oso-badge-fg);
  font-weight:800; font-size:12px; line-height:1;
  margin:0; direction:ltr; unicode-bidi:isolate;
  box-shadow:0 2px 6px rgba(239,68,68,.18);
}

/* Shipping badge states */
.oso-ship,
.rtg-ship{
  display:inline-block; white-space:nowrap;
  padding:.18rem .55rem; border-radius:999px;
  font-size:12.5px; line-height:1.2;
  background:var(--oso-paid-bg); border:1px solid var(--oso-paid-bd); color:var(--oso-paid-fg);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.oso-ship.is-free,
.rtg-ship.is-free{
  background:var(--oso-free-bg);
  border-color:var(--oso-free-bd);
  color:var(--oso-free-fg);
}
.oso-ship.is-paid,
.rtg-ship.is-paid{
  background:var(--oso-paid-bg);
  border-color:var(--oso-paid-bd);
  color:var(--oso-paid-fg);
}
.oso-ship.is-pending,
.rtg-ship.is-pending{
  position:relative;
  background:var(--oso-pending-bg);
  border-color:var(--oso-pending-bd);
  color:var(--oso-pending-fg);
}
.oso-ship.is-pending::after,
.rtg-ship.is-pending::after{
  content:"";
  width:12px; height:12px; margin-inline-start:6px;
  border-radius:50%;
  border:2px solid var(--oso-pending-bd);
  border-top-color: var(--oso-muted);
  display:inline-block;
  vertical-align:middle;
  animation: oso-spin .7s linear infinite;
}
@keyframes oso-spin{ to{ transform: rotate(360deg); } }

/* Emphasize total */
.oso-sum-total .oso-sum-label,
.rtg-sum-total .rtg-sum-label{ font-weight:800; color:var(--oso-ink); }
.oso-sum-total .oso-sum-value,
.rtg-sum-total .rtg-sum-value{ font-weight:800; font-size:16px; letter-spacing:.2px; }

/* Extra spacing under form on mobile to avoid sticky overlap */
@media (max-width:480px){
  .oso-sum-row,
  .rtg-sum-row{ padding:12px 14px; }
  .oso-sum-value,
  .rtg-sum-value{ font-size:13px; }
  .oso-sum-total .oso-sum-value,
  .rtg-sum-total .rtg-sum-value{ font-size:15px; }
  .single-product form.cart{
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}


/* =======================================================================
   Unified card layout (fields + summary in one block)
   ======================================================================= */
.oso-order-card,
.rtg-order-card{
  margin:16px 0;
  background:var(--oso-card);
  border:1px solid var(--oso-line);
  border-radius:16px;
  box-shadow:var(--oso-shadow);
  overflow:hidden;
}
.oso-order-card .oso-quick-box,
.rtg-order-card .rtg-quick-box{
  margin:0 !important; padding:18px !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.oso-order-card .oso-summary,
.rtg-order-card .rtg-summary{
  margin:0 !important;
  border:0 !important; border-top:1px dashed var(--oso-line) !important;
  border-radius:0 !important; box-shadow:none !important;
}
.oso-order-card .oso-sum-head,
.rtg-order-card .rtg-sum-head{
  background:linear-gradient(to left, var(--oso-soft), #fff);
  border-bottom:1px solid var(--oso-line);
}

/* Flash highlight when focusing the card */
.oso-order-card.oso-flash,
.rtg-order-card.rtg-flash{
  animation: oso-flash-anim 0.9s ease-out 1;
}
@keyframes oso-flash-anim{
  0%{   box-shadow:0 0 0 0 rgba(181,122,87,.0); }
  20%{  box-shadow:0 0 0 6px rgba(181,122,87,.18); }
  100%{ box-shadow:0 0 0 0 rgba(181,122,87,.0); }
}


/* =======================================================================
   Sticky bar — mobile
   ======================================================================= */
@media (max-width: 480px){
  .oso-sticky,
  .rtg-sticky{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--oso-line);
    box-shadow:0 -6px 16px rgba(0,0,0,.06);
    transition: transform .22s ease, opacity .2s ease;
    will-change: transform, opacity;
  }
  .oso-sticky .oso-stk-left,
  .rtg-sticky .rtg-stk-left{
    display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; overflow:hidden;
  }
  .oso-sticky .oso-stk-title,
  .rtg-sticky .rtg-stk-title{
    font-weight:700; color:var(--oso-ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:55%;
  }
  .oso-sticky .oso-stk-sub,
  .rtg-sticky .rtg-stk-sub{ opacity:.9; font-size:12.5px; }
  .oso-sticky .oso-stk-total,
  .rtg-sticky .rtg-stk-total{ font-weight:800; }
  .oso-sticky .oso-stk-btn,
  .rtg-sticky .rtg-stk-btn{
    padding:.7rem 1rem; border:0; border-radius:10px; background:var(--oso-accent); color:#fff; font-weight:800;
  }
  .oso-sticky.is-hidden,
  .rtg-sticky.is-hidden{
    transform: translateY(120%); opacity: 0; pointer-events: none;
  }
  .oso-sticky.is-free-ship .oso-stk-total::after,
  .rtg-sticky.is-free-ship .rtg-stk-total::after{
    content:" · Free"; margin-inline-start:6px; color:var(--oso-free-fg); font-weight:700; font-size:12.5px;
  }
}


/* =======================================================================
   Sticky bar — desktop (animated)
   ======================================================================= */
#oso-sticky-dt,
.rtg-sticky-dt{
  position: fixed;
  inset-inline: 24px;
  bottom: 22px;
  z-index: 70;
  direction: rtl;

  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 18px;
  background:var(--oso-card);
  border:1px solid var(--oso-line);
  border-radius:18px;
  box-shadow:var(--oso-shadow);

  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
#oso-sticky-dt.is-visible,
.rtg-sticky-dt.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  #oso-sticky-dt,
  .rtg-sticky-dt{ transition:none; }
}

.oso-stk-dt-right,
.rtg-stk-dt-right{ display:flex; align-items:center; gap:12px; min-width:0; }
.oso-stk-dt-img,
.rtg-stk-dt-img{
  width:52px; height:52px; flex:0 0 auto; object-fit:cover;
  border:1px solid var(--oso-line); border-radius:12px; background:#fff;
}
.oso-stk-dt-title,
.rtg-stk-dt-title{
  max-width:36vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-weight:800; color:var(--oso-ink);
}

.oso-stk-dt-center,
.rtg-stk-dt-center{
  display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:0;
}
.oso-stk-dt-math,
.rtg-stk-dt-math{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  direction:rtl; color:var(--oso-ink); font-size:15px;
}
.oso-stk-dt-math .oso-op,
.rtg-stk-dt-math .rtg-op{ opacity:.65; margin-inline:8px; }
.oso-stk-dt-total,
.rtg-stk-dt-total{ font-size:17px; font-weight:800; }

.oso-stk-dt-left,
.rtg-stk-dt-left{ flex:0 0 auto; }
.oso-stk-dt-btn,
.rtg-stk-dt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:128px; min-height:46px; line-height:1;
  padding:.9rem 1.2rem;
  border:0; border-radius:12px; cursor:pointer;
  background:var(--oso-accent); color:#fff; font-weight:800;
  box-shadow:0 8px 18px color-mix(in srgb, var(--oso-accent) 28%, transparent);
}
.oso-stk-dt-btn:hover,
.rtg-stk-dt-btn:hover{ filter:brightness(1.05); }

@media (max-width: 991px){
  #oso-sticky-dt,
  .rtg-sticky-dt{ display:none !important; }
}

/* =======================================================================
   Sticky bar — mobile (image + CTA only)
   ======================================================================= */
#oso-sticky-mb,
#rtg-sticky-mb{
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 75;
  direction: rtl;

  display: flex;
  align-items: center;
  gap: 12px;

  background: var(--oso-card, #fff);
  border-top: 1px solid var(--oso-line, #e5e7eb);
  box-shadow: 0 -8px 18px rgba(0,0,0,.08);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
  transition: opacity .25s ease, transform .28s ease;
  will-change: opacity, transform;
}
#oso-sticky-mb.is-visible,
#rtg-sticky-mb.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#oso-sticky-mb .oso-stk-mb-img,
#rtg-sticky-mb .rtg-stk-mb-img{
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--oso-line, #e5e7eb);
  background: #fff;
  flex: 0 0 auto;
}
#oso-sticky-mb .oso-stk-mb-btn,
#rtg-sticky-mb .rtg-stk-mb-btn{
  flex: 1 1 auto;
  min-height: 44px;
  padding: .85rem 1rem;
  border: 0; border-radius: 12px;
  background: var(--oso-accent, #b57a57);
  color: #fff;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--oso-accent, #b57a57) 28%, transparent);
  cursor: pointer;
  transition: filter .15s ease;
}
#oso-sticky-mb .oso-stk-mb-btn:hover,
#rtg-sticky-mb .rtg-stk-mb-btn:hover{ filter: brightness(1.05); }

@media (min-width: 992px){
  #oso-sticky-mb,
  #rtg-sticky-mb{ display: none !important; }
}