/**
 * Shrisha Forms - Responsive Stylesheet
 */

/* =============================================
   LARGE DESKTOP: 1400px+
   ============================================= */
@media (min-width: 1400px) {
  :root {
    --sf-input-size: 16px;
    --sf-input-height: 48px;
  }
}

/* =============================================
   DESKTOP: 1024px - 1399px
   ============================================= */
@media (max-width: 1399px) {
  .sf-form-row--25 { width: calc(33.333% - var(--sf-column-gap) * .667); }
}

/* =============================================
   TABLET: 768px - 1023px
   ============================================= */
@media (max-width: 1023px) {
  :root {
    --sf-column-gap: 14px;
    --sf-row-gap: 14px;
  }

  .sf-form-row--25,
  .sf-form-row--33 { width: calc(50% - var(--sf-column-gap) * .5); }

  .sf-progress--circle .sf-progress__circles {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sf-otp-inputs { gap: 8px; }
  .sf-otp-digit  { width: 44px; height: 52px; font-size: 20px; }

  .sf-product-list { gap: 10px; }
  .sf-product-item { min-width: 110px; padding: 12px; }
  .sf-product__img { width: 64px; height: 64px; }
}

/* =============================================
   MOBILE: up to 767px
   ============================================= */
@media (max-width: 767px) {
  :root {
    --sf-input-height: 46px;
    --sf-column-gap: 12px;
    --sf-row-gap: 12px;
    --sf-btn-height: 46px;
    --sf-label-size: 13px;
    --sf-input-size: 15px;
  }

  /* All columns go full-width on mobile */
  .sf-form-row--25,
  .sf-form-row--33,
  .sf-form-row--50,
  .sf-form-row--66,
  .sf-form-row--75 {
    width: 100% !important;
  }

  /* Navigation buttons */
  .sf-step__navigation {
    flex-direction: column;
    gap: 10px;
  }

  .sf-step-btn {
    width: 100%;
    justify-content: center;
  }

  .sf-step-btn--next { margin-left: 0; }

  /* Progress breadcrumb scroll */
  .sf-breadcrumb__list {
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sf-breadcrumb__list::-webkit-scrollbar { display: none; }

  /* Inline groups stack */
  .sf-checkbox-group--inline,
  .sf-radio-group--inline {
    flex-direction: column;
    gap: 8px;
  }

  /* Payment gateways */
  .sf-payment-gateways {
    flex-direction: column;
  }

  /* Product list */
  .sf-product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .sf-product-item { min-width: unset; }

  /* OTP */
  .sf-otp-inputs { gap: 6px; }
  .sf-otp-digit  { width: 38px; height: 46px; font-size: 18px; }

  /* File upload text */
  .sf-file-upload { padding: 20px 16px; }
  .sf-file-upload__text { font-size: 13px; }

  /* Coupon */
  .sf-coupon-input-group { flex-direction: column; }
  .sf-coupon-apply-btn   { width: 100%; height: var(--sf-input-height); }

  /* Signature canvas */
  .sf-signature-pad__canvas { height: 160px; }

  /* Quantity */
  .sf-quantity-input { width: 56px !important; }

  /* Rating */
  .sf-rating__item { font-size: 26px; }

  /* Circle progress collapse */
  .sf-progress--circle .sf-progress__circles {
    display: none; /* Use bar on mobile instead */
  }

  /* Admin panel full width tables */
  .sf-admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Submission message */
  .sf-message { font-size: 13px; padding: 12px 14px; }
}

/* =============================================
   SMALL MOBILE: up to 480px
   ============================================= */
@media (max-width: 480px) {
  :root {
    --sf-input-height: 44px;
    --sf-input-padding: 10px 12px;
    --sf-label-size: 12.5px;
    --sf-input-size: 14px;
  }

  .sf-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }

  .sf-form-row--submit { justify-content: stretch; }

  .sf-product-list {
    grid-template-columns: 1fr;
  }

  .sf-otp-digit  { width: 34px; height: 42px; font-size: 16px; }
  .sf-otp-inputs { gap: 5px; }

  .sf-breadcrumb__label { display: none; }

  .sf-progress__circle-label { font-size: 10px; }

  .sf-step__title { font-size: 17px; }
}

/* =============================================
   PRINT
   ============================================= */
@media print {
  .sf-submit-btn,
  .sf-form-loading,
  .sf-step__navigation,
  .sf-progress,
  .sf-captcha-wrap,
  .sf-turnstile-wrap,
  .sf-file-upload__ui,
  .sf-coupon-apply-btn {
    display: none !important;
  }

  .sf-form-wrapper {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .sf-field__input,
  .sf-field__textarea,
  .sf-field__select {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .sf-step { display: block !important; }
}

/* =============================================
   HIGH CONTRAST MODE
   ============================================= */
@media (forced-colors: active) {
  .sf-field__input,
  .sf-field__textarea,
  .sf-field__select {
    border: 2px solid ButtonText;
    background: Field;
    color: FieldText;
  }

  .sf-field__input:focus,
  .sf-field__textarea:focus {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .sf-submit-btn {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
}

/* =============================================
   RTL SUPPORT
   ============================================= */
[dir="rtl"] .sf-field__icon         { left: auto; right: 12px; }
[dir="rtl"] .sf-field__control-wrap--has-icon .sf-field__input { padding-left: var(--sf-input-padding); padding-right: 42px; }
[dir="rtl"] .sf-field__prefix       { left: auto; right: 0; border-radius: 0 var(--sf-radius) var(--sf-radius) 0; border-right: 1px solid var(--sf-border); border-left: none; }
[dir="rtl"] .sf-field__suffix       { right: auto; left: 0; border-radius: var(--sf-radius) 0 0 var(--sf-radius); border-left: 1px solid var(--sf-border); border-right: none; }
[dir="rtl"] .sf-field__select       { background-position: left 14px center; padding-right: var(--sf-input-padding); padding-left: 36px; }
[dir="rtl"] .sf-step-btn--next      { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sf-repeater__remove    { left: 12px; right: auto; }
[dir="rtl"] .sf-quantity-btn--minus { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; }
[dir="rtl"] .sf-quantity-btn--plus  { border-radius: var(--sf-radius) 0 0 var(--sf-radius); }
[dir="rtl"] .sf-price-symbol        { border-radius: 0 var(--sf-radius) var(--sf-radius) 0; }
[dir="rtl"] .sf-price-input         { border-radius: var(--sf-radius) 0 0 var(--sf-radius) !important; }
[dir="rtl"] .sf-coupon-input-group  { flex-direction: row-reverse; }
