/*
 * Tailo buttons (Oct 2026): one button shape and comfortable spacing on every site.
 * Loaded LAST on every page (after the theme files), so it wins over the older pill (999px) styles.
 *   - corners: a little sharp (8px) instead of fully round pills
 *   - space between a button and the text / link right above or below it
 *   - space between an icon and the label inside a button, and between buttons that sit side by side
 * Round floating buttons (help bubble), close (x) buttons and carousel dots keep their round shape; add class
 * "tl-round" to any other button that must stay round.
 * Change the look for every site here: --tl-btn-r (corner), --tl-btn-gap (space around buttons).
 */
:root {
  --tl-btn-r: 8px;      /* buttons */
  --tl-btn-r-sm: 6px;   /* small buttons, buttons inside a segmented switch */
  --tl-field-r: 8px;    /* text boxes and drop-downs, to match the buttons */
  --tl-btn-gap: 14px;   /* space between a button and the text next to it */
}

/* ---------- corner shape ---------- */
html body :is(
  button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"], input[type="reset"],
  .submit-btn, .login-btn, .create-btn, .action-btn, .logout-btn, .cart-btn, .hc-btn, .hv-morebtn,
  .btn-primary, .btn-secondary, .btn-light, .btn-ghost, .btn-gold, .btn-cancel, .btn-confirm, .btn-danger-ghost
):not(.knob):not(.pw-toggle):not(.link-btn):not(.link):not(.duty):not(.forgot-link):not([class*="dot"]):not([class*="dots"] > *):not([class*="fab"]):not([class*="close"]):not([aria-label="Close"]):not(.tl-round) {
  border-radius: var(--tl-btn-r) !important;
}
html body :is(.btn-sm, .btn.sm, .btn.auto, .btn-xs) { border-radius: var(--tl-btn-r-sm) !important; }

/* segmented switches (Men / Women / All, Top rated / Closest, tabs): outer box and inner buttons match */
html body :is(.mode-switch, .hv-seg, .seg, .tabs, .legal-tabs, [role="tablist"]):not(.tabbar) {
  border-radius: calc(var(--tl-btn-r) + 2px) !important;
}
html body :is(.mode-switch, .hv-seg, .seg, .tabs, .legal-tabs, [role="tablist"]):not(.tabbar) :is(button, a, [role="tab"]) {
  border-radius: var(--tl-btn-r-sm) !important;
}

/* search bars and form fields follow the same, less rounded shape */
html body :is(.head-search, .hero-search, .search-bar, .searchbox) { border-radius: var(--tl-field-r) !important; }
html body :is(.head-search, .hero-search) :is(input, select) { border-radius: var(--tl-field-r) !important; }
html body :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
  input[type="search"], input:not([type]), select, textarea):not(.otp-input) {
  border-radius: var(--tl-field-r) !important;
}

/* ---------- spacing inside a button ---------- */
html body :is(.btn, .submit-btn, .login-btn, .create-btn, .action-btn, .btn-primary, .btn-secondary, .btn-light, .btn-ghost) {
  gap: 8px;
  line-height: 1.25;
}
html body :is(.btn, .submit-btn, .login-btn, .create-btn, .action-btn) > svg { flex: none; }

/* ---------- spacing between a button and the text around it ---------- */
/* text, hints and links BELOW a button */
html body :is(button, .btn, .submit-btn, .login-btn, .create-btn, .action-btn, input[type="submit"])
  + :is(p, .small, .hint, .field-hint, .muted, .note, .foot, .switch-line, .shop-link, .msg, .otp-links, .form-note, .helper, .divider, .or) {
  margin-top: var(--tl-btn-gap) !important;
}
/* text, hints, check boxes and links ABOVE a button */
html body :is(p, .small, .hint, .field-hint, .muted, .note, .sub, .consent, label.check, .check, .forgot-link, .switch-line, .helper, .form-note)
  + :is(button, .btn, .submit-btn, .login-btn, .create-btn, .action-btn, input[type="submit"]):not(.link):not(.link-btn) {
  margin-top: var(--tl-btn-gap) !important;
}
/* a "Forgot password?" style link sitting right under a field: room above and below it */
html body .forgot-link,
html body a[href$="forgot-password.html"] {
  display: inline-block;
  margin-top: 8px;
  margin-bottom: 4px;
}
/* the field that holds the "Forgot password?" link, when a button follows it */
html body .field:has(> a[href$="forgot-password.html"]) + :is(button, .btn, .submit-btn, .login-btn, label, .check) {
  margin-top: var(--tl-btn-gap) !important;
}

/* buttons side by side: always a gap, and they wrap instead of squeezing the text */
html body :is(.row, .actions, .btn-row, .buttons, .modal-actions, .dialog-actions, .form-actions, .dlg-actions, .card-actions, .otp-links, menu) {
  gap: 10px;
}
html body :is(.actions, .btn-row, .buttons, .modal-actions, .dialog-actions, .form-actions, .dlg-actions, .card-actions) {
  flex-wrap: wrap;
}

/* a line of text with a button next to it (a task row, a card header): keep them apart */
html body :is(.onb-task, .task-row, .item-row, .list-row, .card-head, .card-header, .row-between) {
  gap: 12px;
}
html body :is(.onb-task, .task-row, .item-row, .list-row) > :is(.btn, button) { flex: none; }

/* a lone button at the end of a card or a dialog, after its text */
html body :is(.card, .modal, dialog, .dialog, .panel, .empty) > :is(p, .small, .muted, .hint, h2, h3, h4, ul, ol, dl)
  + :is(.btn, button.btn, .submit-btn, .action-btn) {
  margin-top: var(--tl-btn-gap) !important;
}

/* shop home: the section tabs (Tailors / Fabric / Express / Readymade) and the search bar */
html body .hv-sections > a { border-radius: var(--tl-btn-r) !important; }
html body :is(.hv-search, .hv-searchrow form) { border-radius: var(--tl-field-r) !important; }
html body .hv-search :is(input, button, select) { border-radius: var(--tl-btn-r-sm) !important; }