.sd-root {
   width: 102%;
   min-height: 100vh;      /* fill viewport height */
   background: #ffffff;
   display: flex;
   flex-direction: column;
   align-items: stretch;   /* children take full width */
   box-sizing: border-box;
   margin-left: -20px;
}


/* Header */
.sd-header {
   align-self: stretch;
   padding: 24px 44px;
   outline: 1px #E3E4EB solid;
   outline-offset: -1px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 20px;
}

.sd-header-text {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 4px;
}

.sd-header-title {
   color: #0A0A0A;
   font-size: 18px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
   line-height: 25.2px;
   word-wrap: break-word;
}

.sd-header-subtitle {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #404040;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   word-wrap: break-word;
}

/* Main layout */
.sd-layout {
   display: flex;
   flex: 1 1 auto;        /* stretch to fill sd-root */
   gap: 15px;             /* if you’re using a sidebar + panel */
}

/* Sidebar */
.sd-sidebar {
   align-self: stretch;
   padding-top: 32px;
   padding-bottom: 8px;
   padding-left: 32px;
   background: #ffffff;
   display: inline-flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

.sd-tab-list {
   width: 240px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
}

/* Tab buttons */
.sd-tab-button {
   align-self: stretch;
   height: 40px;
   padding: 8px 16px;
   border-radius: 8px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
   border: none;
   background: transparent;
   cursor: pointer;
}

.sd-tab-button span {
   flex: 1;
   text-align: left;
}

.sd-tab-button--active {
   background: #DBFBE5;
}

.sd-tab-button--active span {
   color: #0A0A0A;
   font-weight: 500;
}

.sd-tab-panel {
   flex: 1 1 0;
   align-self: stretch;
   padding: 40px 80px;
   display: none;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 44px;
   max-width: 840px;
   width: 100%;
}

.sd-tab-panel--active {
   display: inline-flex;
}

/* Panel header */
.sd-panel-header {
   width: 100%;
   max-width: 840px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 32px;
}

.sd-panel-title-wrap {
   flex: 1 1 0;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 8px;
}

.sd-panel-title {
   align-self: stretch;
   color: #0A0A0A;
   font-size: 24px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
   line-height: 33.6px;
   word-wrap: break-word;
}

/* Save button wrapper */
.sd-save-button {
   height: 40px;
   background: #F4F4F8;
   overflow: hidden;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2px;
}

.sd-save-button span {
   display: flex;
   height: 40px;
   padding: 8px 16px;
   justify-content: center;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
}

/* Disabled / Enabled states */
.sd-save-button--disabled {
   background: #F4F4F8;
   cursor: default;
}

.sd-save-button--disabled span {
   color: #A3A3A3;
}

.sd-save-button--enabled {
   background: #16A34A; /* green */
   cursor: pointer;
}

.sd-save-button--enabled span {
   color: #FFFFFF;
}

/* Panel body */
.sd-panel-body {
   width: 100%;
   max-width: 840px;
   display: block;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

/* Fields */
.sd-field {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

.sd-field-text {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 8px;
}

.sd-field-label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0A0A0A;
   font-size: 16px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 500;
   line-height: 22.4px;
   word-wrap: break-word;
}

.sd-field-description {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #676363;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   word-wrap: break-word;
}

/* Input */
.sd-input-wrapper {
   align-self: stretch;
   padding: 2px;
   border-radius: 8px;
   outline-offset: -1px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
}

.sd-text-input {
   flex: 1 1 0;
   outline: none;
   background: transparent;
   color: #0A0A0A;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   min-height: 38px !important;
}

.shipday-general-notice,
.shipday-rest-api-notice,
.shipday-connect-notice,
.shipday-delivery-notice,
.shipday-pickup-notice,
.shipday-order-sync-notice {
   background: #249d60 !important;
   background: linear-gradient(
       to right,
       #249d60 0,
       #247552 100%,
       #c59237 100%
   ) !important;
   color: #fff;
   padding: 10px;
   font-size: 16px;
   text-align: center;
   border-radius: 3px 0 0 3px;
   text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1),
   1px 1px 1px rgba(0, 0, 0, 0.5);
   position: absolute !important;
   z-index: 200000;
   right: 0;
   display: none;
   margin: 0 !important;
}

/* REST API SECTION */

.rest-api-label-wrapper {
   justify-content: center;
   gap: 8px;
   margin-top: 20px;
   display: inline-flex;
   align-items: center;
}

.rest-api-label {
   align-self: stretch;
   justify-content: center;
   display: inline-block;
   color: #0A0A0A;
   font-size: 14px;
   font-weight: 500;
   line-height: 19.60px;
}
/* ----SECTION END-------- */


/* Order& Datetime Section */
.shipday-toggle-group {
   width: 100%;
   max-width: 840px;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.shipday-toggle-row {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px 0;
   width: 100%;
}

.shipday-toggle-row__text {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 4px;
}

.shipday-toggle-row__title {
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-toggle-row__description {
   color: #404040;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
}

.shipday-switch {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
}

.shipday-switch__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.shipday-switch__track {
   width: 36px;
   height: 20px;
   padding: 2px;
   border-radius: 12px;
   background: #e5e7eb;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
   transition: background 0.16s ease, justify-content 0.16s ease;
}

.shipday-switch__thumb {
   width: 16px;
   height: 16px;
   border-radius: 9999px;
   background: #ffffff;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
   transition: transform 0.16s ease;
}

.shipday-switch__input:checked + .shipday-switch__track {
   background: #01ad85;
   justify-content: flex-end;
}

.shipday-switch__input:focus-visible + .shipday-switch__track {
   outline: 2px solid #01ad85;
   outline-offset: 2px;
}

/* selected days*/
/* Container */
.shipday-select-days {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 16px;
}

/* Header */
.shipday-select-days__header {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.shipday-select-days__label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

/* Simple icon placeholder */
.shipday-tooltip {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-left: 4px;
   cursor: default;
}

/* Icon circle */
.shipday-tooltip__icon {
   width: 18px;
   height: 18px;
   border-radius: 999px;
   border: 1px solid #a3a3a3;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 500;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;
   color: #525252;
   background: #ffffff;
}

/* Tooltip text */
.shipday-tooltip__text {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 140%;
   white-space: nowrap;

   padding: 6px 10px;
   border-radius: 6px;
   background: #171717;
   color: #ffffff;
   font-size: 12px;
   line-height: 1.3;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;

   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease;
   z-index: 10;
}

/* Little arrow */
.shipday-tooltip__text::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: #171717 transparent transparent transparent;
}

/* Show tooltip on hover / focus */
.shipday-tooltip:hover .shipday-tooltip__text,
.shipday-tooltip:focus-within .shipday-tooltip__text {
   opacity: 1;
   pointer-events: auto;
}


/* Chip row */
.shipday-select-days__chips {
   align-self: stretch;
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}

/* Each chip uses a label so the whole pill is clickable */
.shipday-day-chip {
   display: flex;
   align-items: center;
}

/* Hide native checkbox but keep it accessible */
.shipday-day-chip__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

/* Pill style (unchecked default) */
.shipday-day-chip__pill {
   padding: 8px 12px;
   border-radius: 99px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   background: #ffffff;
   outline: 1px solid #d4d4d4;
   outline-offset: -1px;

   color: #262626;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;

   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}

/* Hover */
.shipday-day-chip__pill:hover {
   outline-color: #a3a3a3;
}

/* Checked (selected) state */
.shipday-day-chip__input:checked + .shipday-day-chip__pill {
   background: #171717;
   outline: none;
   color: #ffffff;
}

/* Focus ring for accessibility */
.shipday-day-chip__input:focus-visible + .shipday-day-chip__pill {
   box-shadow: 0 0 0 2px #0f766e;
}

.shipday-next-available {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 12px;
}

/* Header row (label + tooltip) */
.shipday-next-available__header {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.shipday-next-available__label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-delivery-card {
   padding: 32px;
   border-radius: 16px;
   outline: 1px solid #e3e4eb; /* var(--border-Light-border-primary, #E3E4EB) */
   outline-offset: -1px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 32px;
}

.shipday-delivery-card__header {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 4px;
}

.shipday-delivery-card__title {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a; /* var(--Text-Light-Primary, #0A0A0A) */
   font-size: 18px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 600;
   line-height: 25.2px;
   word-wrap: break-word;
}

.shipday-delivery-card__content {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 8px;
}


/* Delivery time*/
/* Container */
.shipday-delivery-slots {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

/* Time rows ("starts from", "ends at") */
.shipday-time-row {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
}

.shipday-time-row__label {
   width: 162px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a; /* var(--Text-Light-Primary) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-time-row__inputs {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
}

/* Hour / minute input wrapper: no custom box */
.shipday-time-input {
   width: 64px;
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
}

/* Actual hour/minute input (uses default browser border) */
.shipday-time-input__field {
   flex: 1 1 0;
   color: #737373; /* var(--Text-Light-Placeholder-500) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   text-align: center;
   padding: 6px 8px;
   min-width: 0;
}

.shipday-time-input__field:focus {
   outline: none;
}

/* Colon between hour & minute */
.shipday-time-separator {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #404040; /* var(--Text-Light-Tertiary) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
}

/* AM/PM select wrapper: no custom box */
.shipday-ampm-select {
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

/* AM/PM select (default border kept) */
.shipday-ampm-select__field {
   color: #737373;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   padding: 8px 10px;
   min-width: 0;
   cursor: pointer;
}

.shipday-ampm-select__field:focus {
   outline: none;
}

/* Slot duration row */
.shipday-slot-duration-row {
   align-self: stretch;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   gap: 16px;
}

.shipday-slot-duration-row__label {
   width: 162px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

/* Slot duration select wrapper: no custom box */
.shipday-slot-duration-field {
   flex: 1 1 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

/* Slot duration select (default border kept) */
.shipday-slot-duration-field__select {
   flex: 1 1 0;
   color: #737373;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   padding: 8px 10px;
   min-width: 0;
   cursor: pointer;
}

.shipday-slot-duration-field__select:focus {
   outline: none;
}

.shipday-divider {
   width: 100%;
   height: 1px;
   background-color: #E3E4EB;
}

.shipday-general-setting {
   width: 100%;
}

.shipday-general-setting__control {
   width: min(100%, 50vw, 420px);
   min-height: 40px;
   padding: 0 14px;
   border: 1px solid #d0d5dd;
   border-radius: 12px;
   background: #ffffff;
   box-sizing: border-box;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shipday-general-setting__control:focus-within {
   border-color: #01ad85;
   box-shadow: 0 0 0 4px rgba(1, 173, 133, 0.12);
}

.shipday-general-setting__control .sd-text-input {
   width: 100%;
   min-height: 38px !important;
   border: 0 !important;
   outline: none !important;
   box-shadow: none !important;
   background: transparent !important;
   padding: 0 !important;
   border-radius: 0 !important;
}

.shipday-general-setting__control--select {
   position: relative;
   padding-right: 10px;
}

.shipday-general-setting__control--select::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 14px;
   width: 8px;
   height: 8px;
   border-right: 2px solid #667085;
   border-bottom: 2px solid #667085;
   transform: translateY(-65%) rotate(45deg);
   pointer-events: none;
}

.shipday-general-setting__control--select .shipday-slot-duration-field__select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   color: #0A0A0A;
   cursor: pointer;
   padding-right: 28px !important;
}

@media (max-width: 782px) {
   .shipday-general-setting__control {
      width: 100%;
   }
}


/*** new overview **/



/* ====== Sidebar headings (non-clickable) ====== */
.sd-tab-heading {
   align-self: stretch;
   height: 40px;
   padding: 8px 16px;
   display: flex;
   align-items: center;
   border-radius: 8px;
   color: #404040;
   font: 600 14px/19.6px Inter, system-ui, sans-serif;
   cursor: default;
}

/* ==================================================================== */
/* OVERVIEW TILES                                                        */
/* ==================================================================== */

/* Reset link coloring so text inherits our tile colors */
.sd-link-tile,
.sd-link-tile:link,
.sd-link-tile:visited,
.sd-link-tile:hover,
.sd-link-tile:focus,
.sd-link-tile:active {
   color: inherit;
   text-decoration: none;
}

/* Lay out tiles as a strict 3‑column grid with equal spacing */
.sd-link-row {
   display: grid;                                    /* <- grid (not flex) */
   grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
   gap: 16px;                                        /* equal spacing */
   align-items: stretch;
}

/* Tile (initial like "Pickup": transparent, no tint) */
.sd-link-tile {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
   border-radius: 10px;
   text-decoration: none;
   background: transparent;        /* <- transparent initial */
   outline: 1px solid transparent; /* avoid layout shift on hover */
   outline-offset: -1px;
   transition: background 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease;
   min-width: 0;                   /* neutralize any previous min-width */
   width: 100%;
}

/* Icon box (kept from your design) */
.sd-link-tile__icon {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   background: #F4F4F8;            /* icon container bg */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 40px;
}

/* Keep SVG sized nicely inside the 40x40 icon container */
.sd-link-tile__icon .sd-link-tile__svg {
   width: 24px;
   height: 24px;
   display: block;
}

/* Text block in tile */
.sd-link-tile__text {
   display: inline-flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

/* Figma text colors (title/body) */
.sd-link-tile__title {
   color: #0A0A0A; /* Title (Primary) */
   font: 500 14px/19.6px Inter, system-ui, sans-serif;
}

.sd-link-tile__desc {
   color: #404040; /* Body (Tertiary) */
   font: 400 14px/19.6px Inter, system-ui, sans-serif;
}

/* === Overview: add vertical gap between the two cards === */
[data-tab-panel="overview"] .sd-panel-body {
   display: flex;              /* stack children */
   flex-direction: column;
   gap: 32px;                  /* space between Checkout Configurations & Order Fulfillment */
}

/* (Optional) If your cards have a dedicated class, keep this too */
.sd-overview-card + .sd-overview-card {
   margin-top: 32px;           /* fallback if markup uses this class */
}

/* Keep icon + text colors unchanged on hover (we only tint the tile) */
.sd-link-tile:hover .sd-link-tile__title { color: #0A0A0A; }
.sd-link-tile:hover .sd-link-tile__desc  { color: #404040; }

/* Responsive: 2 columns on medium, 1 column on small (WP admin breakpoint) */
@media (max-width: 1120px) {
   .sd-link-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
   .sd-link-row { grid-template-columns: 1fr; }
}

/* === Overview: make both cards equal full width === */
[data-tab-panel="overview"] .sd-panel-body {
   display: flex;
   flex-direction: column;
   gap: 32px;          /* keeps the vertical space you wanted */
   align-items: stretch; /* <-- key: children (cards) span full width */
}

/* In case any card wrapper is inline or constrained, normalize it */
[data-tab-panel="overview"] .sd-overview-card,
[data-tab-panel="overview"] .shipday-delivery-card {
   display: flex;      /* ensure block-level flex, not inline-flex */
   width: 100%;
   max-width: none;
   align-self: stretch;
}
/* === Overview: keep the same content width as other tabs (840px) === */
[data-tab-panel="overview"] .sd-panel-body {
   /* .sd-panel-body already has max-width: 840px globally; enforce it here */
   max-width: 840px;
   width: 100%;
   margin: 0;                 /* align with other tabs' body spacing */
   /* keep the layout rules you added earlier */
   display: flex;
   flex-direction: column;
   gap: 32px;                 /* vertical gap between the two cards */
   align-items: stretch;      /* both cards span the same width */
}

/* Undo earlier expansion that let the cards exceed the standard width */
[data-tab-panel="overview"] .sd-overview-card,
[data-tab-panel="overview"] .shipday-delivery-card {
   width: 100%;
   max-width: inherit;        /* inherits 840px from .sd-panel-body */
   align-self: stretch;
   display: flex;             /* ensure not inline-flex */
}
.sd-root {
   width: 102%;
   min-height: 100vh;      /* fill viewport height */
   background: #ffffff;
   display: flex;
   flex-direction: column;
   align-items: stretch;   /* children take full width */
   box-sizing: border-box;
   margin-left: -20px;
}


/* Header */
.sd-header {
   align-self: stretch;
   padding: 24px 44px;
   outline: 1px #E3E4EB solid;
   outline-offset: -1px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 20px;
}

.sd-header-text {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 4px;
}

.sd-header-title {
   color: #0A0A0A;
   font-size: 18px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
   line-height: 25.2px;
   word-wrap: break-word;
}

.sd-header-subtitle {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #404040;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   word-wrap: break-word;
}

/* Main layout */
.sd-layout {
   display: flex;
   flex: 1 1 auto;        /* stretch to fill sd-root */
   gap: 15px;             /* if you’re using a sidebar + panel */
}

/* Sidebar */
.sd-sidebar {
   align-self: stretch;
   padding-top: 32px;
   padding-bottom: 8px;
   padding-left: 32px;
   background: #ffffff;
   display: inline-flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

.sd-tab-list {
   width: 240px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
}

/* Tab buttons */
.sd-tab-button {
   align-self: stretch;
   height: 40px;
   padding: 8px 16px;
   border-radius: 8px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
   border: none;
   background: transparent;
   cursor: pointer;
}

.sd-tab-button span {
   flex: 1;
   text-align: left;
}

.sd-tab-button--active {
   background: #DBFBE5;
}

.sd-tab-button--active span {
   color: #0A0A0A;
   font-weight: 500;
}

.sd-tab-panel {
   flex: 1 1 0;
   align-self: stretch;
   padding: 40px 80px;
   display: none;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 44px;
   max-width: 840px;
   width: 100%;
}

.sd-tab-panel--active {
   display: inline-flex;
}

/* Panel header */
.sd-panel-header {
   width: 100%;
   max-width: 840px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 32px;
}

.sd-panel-title-wrap {
   flex: 1 1 0;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 8px;
}

.sd-panel-title {
   align-self: stretch;
   color: #0A0A0A;
   font-size: 24px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
   line-height: 33.6px;
   word-wrap: break-word;
}

/* Save button wrapper */
.sd-save-button {
   height: 40px;
   background: #F4F4F8;
   overflow: hidden;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2px;
}

.sd-save-button span {
   display: flex;
   height: 40px;
   padding: 8px 16px;
   justify-content: center;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 600;
}

/* Disabled / Enabled states */
.sd-save-button--disabled {
   background: #F4F4F8;
   cursor: default;
}

.sd-save-button--disabled span {
   color: #A3A3A3;
}

.sd-save-button--enabled {
   background: #16A34A; /* green */
   cursor: pointer;
}

.sd-save-button--enabled span {
   color: #FFFFFF;
}

/* Panel body */
.sd-panel-body {
   width: 100%;
   max-width: 840px;
   display: block;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

/* Fields */
.sd-field {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

.sd-field-text {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 8px;
}

.sd-field-label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0A0A0A;
   font-size: 16px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 500;
   line-height: 22.4px;
   word-wrap: break-word;
}

.sd-field-description {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #404040;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   word-wrap: break-word;
}

/* Input */
.sd-input-wrapper {
   align-self: stretch;
   padding: 2px;
   border-radius: 8px;
   outline-offset: -1px;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
}

.sd-text-input {
   flex: 1 1 0;
   outline: none;
   background: transparent;
   color: #0A0A0A;
   font-size: 14px;
   font-family: Inter, system-ui, sans-serif;
   font-weight: 400;
   min-height: 38px !important;
}

.shipday-general-notice,
.shipday-rest-api-notice,
.shipday-order-datetime-notice,
.shipday-delivery-notice,
.shipday-pickup-notice {
   background: #249d60 !important;
   background: linear-gradient(
       to right,
       #249d60 0,
       #247552 100%,
       #c59237 100%
   ) !important;
   color: #fff;
   padding: 10px;
   font-size: 16px;
   text-align: center;
   border-radius: 3px 0 0 3px;
   text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1),
   1px 1px 1px rgba(0, 0, 0, 0.5);
   position: absolute !important;
   z-index: 200000;
   right: 0;
   display: none;
   margin: 0 !important;
}

/* REST API SECTION */

.rest-api-label-wrapper {
   justify-content: center;
   gap: 8px;
   margin-top: 20px;
   display: inline-flex;
   align-items: center;
}

.rest-api-label {
   align-self: stretch;
   justify-content: center;
   display: inline-block;
   color: #0A0A0A;
   font-size: 14px;
   font-weight: 500;
   line-height: 19.60px;
}
/* ----SECTION END-------- */


/* Order& Datetime Section */
.shipday-toggle-group {
   width: 100%;
   max-width: 840px;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.shipday-toggle-row {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px 0;
   width: 100%;
}

.shipday-toggle-row__text {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 4px;
}

.shipday-toggle-row__title {
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-toggle-row__description {
   color: #404040;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
}

.shipday-switch {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
}

.shipday-switch__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.shipday-switch__track {
   width: 36px;
   height: 20px;
   padding: 2px;
   border-radius: 12px;
   background: #e5e7eb;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
   transition: background 0.16s ease, justify-content 0.16s ease;
}

.shipday-switch__thumb {
   width: 16px;
   height: 16px;
   border-radius: 9999px;
   background: #ffffff;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
   transition: transform 0.16s ease;
}

.shipday-switch__input:checked + .shipday-switch__track {
   background: #01ad85;
   justify-content: flex-end;
}

.shipday-switch__input:focus-visible + .shipday-switch__track {
   outline: 2px solid #01ad85;
   outline-offset: 2px;
}

/* selected days*/
/* Container */
.shipday-select-days {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 16px;
}

/* Header */
.shipday-select-days__header {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.shipday-select-days__label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

/* Simple icon placeholder */
.shipday-tooltip {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-left: 4px;
   cursor: default;
}

/* Icon circle */
.shipday-tooltip__icon {
   width: 18px;
   height: 18px;
   border-radius: 999px;
   border: 1px solid #a3a3a3;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 500;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;
   color: #525252;
   background: #ffffff;
}

/* Tooltip text */
.shipday-tooltip__text {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 140%;
   white-space: nowrap;

   padding: 6px 10px;
   border-radius: 6px;
   background: #171717;
   color: #ffffff;
   font-size: 12px;
   line-height: 1.3;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;

   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease;
   z-index: 10;
}

/* Little arrow */
.shipday-tooltip__text::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: #171717 transparent transparent transparent;
}

/* Show tooltip on hover / focus */
.shipday-tooltip:hover .shipday-tooltip__text,
.shipday-tooltip:focus-within .shipday-tooltip__text {
   opacity: 1;
   pointer-events: auto;
}


/* Chip row */
.shipday-select-days__chips {
   align-self: stretch;
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}

/* Each chip uses a label so the whole pill is clickable */
.shipday-day-chip {
   display: flex;
   align-items: center;
}

/* Hide native checkbox but keep it accessible */
.shipday-day-chip__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

/* Pill style (unchecked default) */
.shipday-day-chip__pill {
   padding: 8px 12px;
   border-radius: 99px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   background: #ffffff;
   outline: 1px solid #d4d4d4;
   outline-offset: -1px;

   color: #262626;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;

   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}

/* Hover */
.shipday-day-chip__pill:hover {
   outline-color: #a3a3a3;
}

/* Checked (selected) state */
.shipday-day-chip__input:checked + .shipday-day-chip__pill {
   background: #171717;
   outline: none;
   color: #ffffff;
}

/* Focus ring for accessibility */
.shipday-day-chip__input:focus-visible + .shipday-day-chip__pill {
   box-shadow: 0 0 0 2px #0f766e;
}

.shipday-next-available {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 12px;
}

/* Header row (label + tooltip) */
.shipday-next-available__header {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.shipday-next-available__label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-delivery-card {
   padding: 32px;
   border-radius: 16px;
   outline: 1px solid #e3e4eb; /* var(--border-Light-border-primary, #E3E4EB) */
   outline-offset: -1px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 32px;
}

.shipday-delivery-card__header {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 4px;
}

.shipday-delivery-card__title {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a; /* var(--Text-Light-Primary, #0A0A0A) */
   font-size: 18px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 600;
   line-height: 25.2px;
   word-wrap: break-word;
}

.shipday-delivery-card__content {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 8px;
}


/* Delivery time*/
/* Container */
.shipday-delivery-slots {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 16px;
}

/* Time rows ("starts from", "ends at") */
.shipday-time-row {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
}

.shipday-time-row__label {
   width: 162px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a; /* var(--Text-Light-Primary) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

.shipday-time-row__inputs {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
}

/* Hour / minute input wrapper: no custom box */
.shipday-time-input {
   width: 64px;
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
}

/* Actual hour/minute input (uses default browser border) */
.shipday-time-input__field {
   flex: 1 1 0;
   color: #737373; /* var(--Text-Light-Placeholder-500) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   text-align: center;
   padding: 6px 8px;
   min-width: 0;
}

.shipday-time-input__field:focus {
   outline: none;
}

/* Colon between hour & minute */
.shipday-time-separator {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #404040; /* var(--Text-Light-Tertiary) */
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
}

/* AM/PM select wrapper: no custom box */
.shipday-ampm-select {
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

/* AM/PM select (default border kept) */
.shipday-ampm-select__field {
   color: #737373;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   padding: 8px 10px;
   min-width: 0;
   cursor: pointer;
}

.shipday-ampm-select__field:focus {
   outline: none;
}

/* Slot duration row */
.shipday-slot-duration-row {
   align-self: stretch;
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   gap: 16px;
}

.shipday-slot-duration-row__label {
   width: 162px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #0a0a0a;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 500;
   line-height: 19.6px;
}

/* Slot duration select wrapper: no custom box */
.shipday-slot-duration-field {
   flex: 1 1 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

/* Slot duration select (default border kept) */
.shipday-slot-duration-field__select {
   flex: 1 1 0;
   color: #737373;
   font-size: 14px;
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
   "Segoe UI", sans-serif;
   font-weight: 400;
   line-height: 19.6px;
   padding: 8px 10px;
   min-width: 0;
   cursor: pointer;
}

.shipday-slot-duration-field__select:focus {
   outline: none;
}

.shipday-divider {
   width: 100%;
   height: 1px;
   background-color: #E3E4EB;
}


/*** new overview **/



/* ====== Sidebar headings (non-clickable) ====== */
.sd-tab-heading {
   align-self: stretch;
   height: 40px;
   padding: 8px 16px;
   display: flex;
   align-items: center;
   border-radius: 8px;
   color: #404040;
   font: 600 14px/19.6px Inter, system-ui, sans-serif;
   cursor: default;
}

/* ==================================================================== */
/* OVERVIEW TILES                                                        */
/* ==================================================================== */

/* Reset link coloring so text inherits our tile colors */
.sd-link-tile,
.sd-link-tile:link,
.sd-link-tile:visited,
.sd-link-tile:hover,
.sd-link-tile:focus,
.sd-link-tile:active {
   color: inherit;
   text-decoration: none;
}

/* Lay out tiles as a strict 3‑column grid with equal spacing */
.sd-link-row {
   display: grid;                                    /* <- grid (not flex) */
   grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
   gap: 16px;                                        /* equal spacing */
   align-items: stretch;
}

/* Tile (initial like "Pickup": transparent, no tint) */
.sd-link-tile {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
   border-radius: 10px;
   text-decoration: none;
   background: transparent;        /* <- transparent initial */
   outline: 1px solid transparent; /* avoid layout shift on hover */
   outline-offset: -1px;
   transition: background 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease;
   min-width: 0;                   /* neutralize any previous min-width */
   width: 100%;
}

/* Hover like "General": light gray tile background */
.sd-link-tile:hover {
   background: #F5F6FA;            /* <- same tint as "General" tile */
   outline-color: #E3E4EB;
   box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Icon box (kept from your design) */
.sd-link-tile__icon {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   background: #F4F4F8;            /* icon container bg */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 40px;
}

/* Keep SVG sized nicely inside the 40x40 icon container */
.sd-link-tile__icon .sd-link-tile__svg {
   width: 24px;
   height: 24px;
   display: block;
}

/* Text block in tile */
.sd-link-tile__text {
   display: inline-flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

/* Figma text colors (title/body) */
.sd-link-tile__title {
   color: #0A0A0A; /* Title (Primary) */
   font: 500 14px/19.6px Inter, system-ui, sans-serif;
}

.sd-link-tile__desc {
   color: #404040; /* Body (Tertiary) */
   font: 400 14px/19.6px Inter, system-ui, sans-serif;
}

/* === Overview: add vertical gap between the two cards === */
[data-tab-panel="overview"] .sd-panel-body {
   display: flex;              /* stack children */
   flex-direction: column;
   gap: 32px;                  /* space between Checkout Configurations & Order Fulfillment */
}

/* (Optional) If your cards have a dedicated class, keep this too */
.sd-overview-card + .sd-overview-card {
   margin-top: 32px;           /* fallback if markup uses this class */
}

/* Keep icon + text colors unchanged on hover (we only tint the tile) */
.sd-link-tile:hover .sd-link-tile__title { color: #0A0A0A; }
.sd-link-tile:hover .sd-link-tile__desc  { color: #404040; }

/* Responsive: 2 columns on medium, 1 column on small (WP admin breakpoint) */
@media (max-width: 1120px) {
   .sd-link-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
   .sd-link-row { grid-template-columns: 1fr; }
}

/* === Overview: make both cards equal full width === */
[data-tab-panel="overview"] .sd-panel-body {
   display: flex;
   flex-direction: column;
   gap: 32px;          /* keeps the vertical space you wanted */
   align-items: stretch; /* <-- key: children (cards) span full width */
}

/* In case any card wrapper is inline or constrained, normalize it */
[data-tab-panel="overview"] .sd-overview-card,
[data-tab-panel="overview"] .shipday-delivery-card {
   display: flex;      /* ensure block-level flex, not inline-flex */
   width: 100%;
   max-width: none;
   align-self: stretch;
}
/* === Overview: keep the same content width as other tabs (840px) === */
[data-tab-panel="overview"] .sd-panel-body {
   /* .sd-panel-body already has max-width: 840px globally; enforce it here */
   max-width: 840px;
   width: 100%;
   margin: 0;                 /* align with other tabs' body spacing */
   /* keep the layout rules you added earlier */
   display: flex;
   flex-direction: column;
   gap: 32px;                 /* vertical gap between the two cards */
   align-items: stretch;      /* both cards span the same width */
}

/* Undo earlier expansion that let the cards exceed the standard width */
[data-tab-panel="overview"] .sd-overview-card,
[data-tab-panel="overview"] .shipday-delivery-card {
   width: 100%;
   max-width: inherit;        /* inherits 840px from .sd-panel-body */
   align-self: stretch;
   display: flex;             /* ensure not inline-flex */
}
/* === Overview width parity with other tabs === */

/* 1) Cap Overview content just like the other tabs (840px) */
[data-tab-panel="overview"] .sd-panel-body {
   max-width: 840px !important;  /* same as General / Rest API / Delivery */
   width: 100%;
   margin: 0;
   display: flex;                 /* keep your two-card stack + spacing */
   flex-direction: column;
   gap: 32px;
   align-items: stretch;
}

/* 2) Prevent the two Overview cards from exceeding the body width
      (replace previous max-width: none/inherit) */
[data-tab-panel="overview"] .sd-overview-card,
[data-tab-panel="overview"] .shipday-delivery-card {
   width: 100%;
   max-width: 100% !important;    /* hard cap at container width */
   box-sizing: border-box;        /* padding/outline won’t push width over */
}

/* 3) Defensive: neutralize any leftover Figma inline paddings in Overview */
[data-tab-panel="overview"] [style*="padding-left"],
[data-tab-panel="overview"] [style*="padding-right"] {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

/* Smaller hover panel only horizontally (keep full height) */
.sd-link-tile {
   position: relative;
   isolation: isolate;               /* keep ::after behind content */
   --tile-hover-inset-x: 6px;        /* adjust 4–10px to taste */
}

/* keep the tile itself transparent on hover */
.sd-link-tile:hover {
   background: transparent;
   outline-color: transparent;
   box-shadow: none;
}

/* inner hover box */
.sd-link-tile::after {
   content: "";
   position: absolute;
   top: 0;                           /* full height */
   bottom: 0;                        /* full height */
   left: 0;
   right: 0;
   border-radius: 10px;
   background: transparent;
   border: 1px solid transparent;
   box-shadow: none;
   pointer-events: none;
   z-index: -1;
   transition:
       left 0.15s ease,
       right 0.15s ease,
       background 0.15s ease,
       border-color 0.15s ease,
       box-shadow 0.15s ease;
}

/* on hover, inset horizontally only */
.sd-link-tile:hover::after,
.sd-link-tile:focus-visible::after {
   left: var(--tile-hover-inset-x);
   right: var(--tile-hover-inset-x);
   /* top/bottom stay 0 -> full height retained */
   background: #F5F6FA;              /* your gray */
   border-color: #E3E4EB;
   box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* optional keyboard focus outline on the tile itself */
.sd-link-tile:focus-visible {
   outline: 2px solid #16A34A;
   outline-offset: 2px;
}

/* === Sidebar: make "Overview" link bold (regardless of active state) === */
.sd-tab-button[data-tab="overview"] span {
   font-weight: 700;
}

/* Keep it bold even when active (explicit for specificity) */
.sd-tab-button.sd-tab-button--active[data-tab="overview"] span {
   font-weight: 700;
}

.sd-tab-button[data-tab="rest-api"],
.sd-tab-button[data-tab="order-sync"],
.sd-tab-button[data-tab="delivery"],
.sd-tab-button[data-tab="pickup"] {
   margin-top: -2px; /* from 8px gap to ~4px visually */
}

/* Optional: on very small screens, ease the tightening a bit */
@media (max-width: 782px) {
   .sd-tab-button[data-tab="rest-api"],
   .sd-tab-button[data-tab="order-sync"],
   .sd-tab-button[data-tab="delivery"],
   .sd-tab-button[data-tab="pickup"] {
      margin-top: -2px;
   }
}

/* === Overview: header descriptions under card titles === */
.sd-overview-card__header {
   /* usually already column + gap; this keeps things tidy */
   display: flex;
   flex-direction: column;
   gap: 4px; /* small space between title and description */
}

.sd-overview-card__desc {
   color: #676363;                 /* disabled/muted color */
   font: 400 14px/19.6px Inter, system-ui, sans-serif;
   margin-top: -15px;
}

/* If your second card uses a different wrapper, reuse the same class */
.sd-overview-card--fulfillment .sd-overview-card__desc { color: #A3A3A3; }

input[type=checkbox].disabled, input[type=checkbox].disabled:checked:before, input[type=checkbox]:disabled, input[type=checkbox]:disabled:checked:before, input[type=checkbox][aria-disabled=true], input[type=radio].disabled, input[type=radio].disabled:checked:before, input[type=radio]:disabled, input[type=radio]:disabled:checked:before, input[type=radio][aria-disabled=true] {
   opacity: 0 !important;
   cursor: default;
}
input[type=checkbox].disabled + .shipday-switch__track {
   background: #aaa !important;
}

/* Radio group aligned to the right of the row, matching existing row rhythm */
.sd-radio-group {
   margin-left: auto;                 /* push radios to the right edge */
   display: inline-flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
}

/* Each radio */
.sd-radio {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   user-select: none;
}

.sd-radio__input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

/* Custom radio visual */
.sd-radio__mark {
   width: 16px;
   height: 16px;
   border-radius: 9999px;
   background: #ffffff;
   outline: 1px solid #d4d4d4;
   outline-offset: -1px;
   position: relative;
   display: inline-block;
}

/* Checked state */
.sd-radio__input:checked + .sd-radio__mark {
   outline-color: #01ad85;
}
.sd-radio__input:checked + .sd-radio__mark::after {
   content: "";
   position: absolute;
   inset: 3px;
   border-radius: 9999px;
   background: #01ad85;
}

/* Focus ring */
.sd-radio__input:focus-visible + .sd-radio__mark {
   box-shadow: 0 0 0 2px #0f766e;
}

/* Label text style consistent with your body text */
.sd-radio__label {
   color: #0a0a0a;
   font: 400 14px/19.6px Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Small screen: let radios wrap nicely under the title */
@media (max-width: 782px) {
   .sd-radio-group {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
   }
}


/* Make anything inside feel unclickable */
.sd-fieldset[disabled] * {
   cursor: not-allowed !important;
}