/* SG Shipping Calculator v1.2.0 — all rules scoped to #sg-shipping-calculator */

#sg-shipping-calculator {
    --c-bg:      #0d1b2e;
    --c-mid:     #162336;
    --c-soft:    #1e3050;
    --c-amber:   #f5a623;
    --c-amber2:  #d4891a;
    --c-white:   #ffffff;
    --c-light:   #e8edf4;
    --c-muted:   #8fa4bf;
    --c-border:  rgba(255,255,255,0.09);
    --c-fedex:   #4d148c;
    --c-dhl:     #d40511;
    --c-green:   #81c784;
    --c-radius:  6px;
    --c-font-h:  'Barlow Condensed', sans-serif;
    --c-font-b:  'Barlow', sans-serif;

    font-family:     var(--c-font-b);
    font-size:       16px;
    background:      var(--c-bg);
    border-radius:   10px;
    max-width:       780px;
    margin:          2rem auto;
    overflow:        hidden;
    box-shadow:      0 8px 32px rgba(0,0,0,0.4);
    color:           var(--c-white);
    position:        relative;
}

/* Strip theme interference */
#sg-shipping-calculator *,
#sg-shipping-calculator *::before,
#sg-shipping-calculator *::after {
    box-sizing: border-box;
}

#sg-shipping-calculator h2,
#sg-shipping-calculator h3,
#sg-shipping-calculator p,
#sg-shipping-calculator label,
#sg-shipping-calculator small {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     26px 30px 22px;
    background:  linear-gradient(135deg, var(--c-soft), var(--c-bg));
    border-bottom: 1px solid var(--c-border);
}

#sg-shipping-calculator .sgc-header-icon {
    width:           50px;
    height:          50px;
    background:      var(--c-amber);
    border-radius:   var(--c-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--c-bg);
    flex-shrink:     0;
}

#sg-shipping-calculator .sgc-title {
    font-family:     var(--c-font-h);
    font-size:       1.7rem;
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    color:           var(--c-white);
    line-height:     1;
    margin-bottom:   4px;
}

#sg-shipping-calculator .sgc-subtitle {
    font-size: 0.85rem;
    color:     var(--c-muted);
}

/* ── Form ───────────────────────────────────────────────────────────────── */
#sg-shipping-calculator form {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
}

#sg-shipping-calculator .sgc-field-group {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

#sg-shipping-calculator .sgc-label {
    font-family:     var(--c-font-h);
    font-size:       0.75rem;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--c-muted);
}

#sg-shipping-calculator .sgc-label-sub {
    font-weight:    400;
    letter-spacing: 0;
    text-transform: none;
    font-family:    var(--c-font-b);
    font-size:      0.72rem;
    color:          var(--c-muted);
}

/* ── Toggle buttons ─────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#sg-shipping-calculator .sgc-toggle-btn {
    display:     flex;
    flex-direction: column;
    gap:         3px;
    padding:     13px 15px;
    background:  var(--c-soft);
    border:      1.5px solid var(--c-border);
    border-radius: var(--c-radius);
    cursor:      pointer;
    transition:  border-color 0.15s, background 0.15s;
    position:    relative;
    user-select: none;
}

#sg-shipping-calculator .sgc-toggle-btn input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    1px;
    height:   1px;
    top:      0;
    left:     0;
}

#sg-shipping-calculator .sgc-toggle-btn.active {
    border-color: var(--c-amber);
    background:   rgba(245,166,35,0.12);
}

#sg-shipping-calculator .sgc-toggle-btn svg {
    color: var(--c-amber);
    flex-shrink: 0;
    margin-bottom: 2px;
}

#sg-shipping-calculator .sgc-toggle-btn span {
    font-family:    var(--c-font-h);
    font-size:      0.95rem;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--c-light);
    display:        block;
}

#sg-shipping-calculator .sgc-toggle-btn small {
    font-size:   0.73rem;
    color:       var(--c-muted);
    font-family: var(--c-font-b);
}

/* ── Route bar ──────────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-route-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    padding:         14px 18px;
    background:      rgba(255,255,255,0.04);
    border:          1px solid var(--c-border);
    border-radius:   var(--c-radius);
}

#sg-shipping-calculator .sgc-route-node {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    min-width:      90px;
    text-align:     center;
}

#sg-shipping-calculator .sgc-route-node > span:first-child {
    font-size: 1.7rem;
    line-height: 1;
}

#sg-shipping-calculator .sgc-route-node > span:nth-child(2) {
    font-family:   var(--c-font-h);
    font-size:     0.85rem;
    font-weight:   700;
    color:         var(--c-light);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     120px;
}

#sg-shipping-calculator .sgc-route-node small {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
}

#sg-shipping-calculator .sgc-route-arrow {
    font-size:  1.5rem;
    color:      var(--c-amber);
    flex-shrink: 0;
}

/* ── Select ─────────────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-select-wrap {
    position: relative;
}

#sg-shipping-calculator select {
    width:          100%;
    padding:        11px 16px;
    background:     var(--c-soft);
    border:         1px solid var(--c-border);
    border-radius:  var(--c-radius);
    color:          var(--c-white);
    font-family:    var(--c-font-b);
    font-size:      0.95rem;
    appearance:     none;
    -webkit-appearance: none;
    cursor:         pointer;
    outline:        none;
    transition:     border-color 0.15s;
}

#sg-shipping-calculator select:focus {
    border-color: var(--c-amber);
    box-shadow:   0 0 0 3px rgba(245,166,35,0.15);
}

#sg-shipping-calculator select option {
    background: var(--c-mid);
    color: var(--c-white);
}

/* ── Number input ───────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

#sg-shipping-calculator input[type="number"] {
    width:          100%;
    padding:        11px 50px 11px 14px;
    background:     var(--c-soft);
    border:         1px solid var(--c-border);
    border-radius:  var(--c-radius);
    color:          var(--c-white);
    font-family:    var(--c-font-h);
    font-size:      1.2rem;
    font-weight:    600;
    outline:        none;
    transition:     border-color 0.15s;
    -moz-appearance: textfield;
}

#sg-shipping-calculator input[type="number"]:focus {
    border-color: var(--c-amber);
    box-shadow:   0 0 0 3px rgba(245,166,35,0.15);
}

#sg-shipping-calculator input[type="number"]::-webkit-outer-spin-button,
#sg-shipping-calculator input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#sg-shipping-calculator input[type="number"]::placeholder {
    color: rgba(255,255,255,0.2);
    font-weight: 400;
}

#sg-shipping-calculator #sgc-unit {
    position:   absolute;
    right:      14px;
    font-family: var(--c-font-h);
    font-size:  0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color:      var(--c-amber);
    pointer-events: none;
    text-transform: uppercase;
}

#sg-shipping-calculator .sgc-hint {
    font-size: 0.78rem;
    color:     var(--c-muted);
    line-height: 1.4;
}

/* ── Dimension inputs ───────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-dim-row {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
}

#sg-shipping-calculator .sgc-dim-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#sg-shipping-calculator .sgc-dim-cell input[type="number"] {
    padding: 9px 10px;
    font-size: 1rem;
    text-align: center;
    width: 100%;
}

#sg-shipping-calculator .sgc-dim-cell span {
    font-size:   0.68rem;
    font-family: var(--c-font-h);
    font-weight: 700;
    letter-spacing: 0.08em;
    color:       var(--c-muted);
    text-transform: uppercase;
}

#sg-shipping-calculator .sgc-dim-x {
    font-size:   1.1rem;
    color:       var(--c-muted);
    flex-shrink: 0;
    padding-bottom: 20px;
}

/* ── Volumetric preview ─────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-vol-box {
    background:   rgba(255,255,255,0.04);
    border:       1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding:      11px 15px;
    display:      flex;
    flex-direction: column;
    gap:          5px;
}

#sg-shipping-calculator .sgc-vol-box > div {
    display:         flex;
    justify-content: space-between;
    font-size:       0.8rem;
    color:           var(--c-muted);
}

#sg-shipping-calculator .sgc-vol-box strong {
    font-family: var(--c-font-h);
    font-size:   0.9rem;
    font-weight: 700;
    color:       var(--c-light);
}

#sg-shipping-calculator .sgc-v-chg {
    border-top:  1px solid var(--c-border);
    padding-top: 5px;
    margin-top:  2px;
    color:       var(--c-light) !important;
}

/* ── Box preview ────────────────────────────────────────────────────────── */
#sg-shipping-calculator .sgc-box-preview {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding:     13px 16px;
    background:  rgba(245,166,35,0.07);
    border:      1px solid rgba(245,166,35,0.2);
    border-radius: var(--c-radius);
    font-size:   0.83rem;
    color:       var(--c-light);
    line-height: 1.5;
}

#sg-shipping-calculator .sgc-box-preview svg {
    color:       var(--c-amber);
    flex-shrink: 0;
    margin-top:  2px;
}

#sg-shipping-calculator .sgc-box-preview strong {
    color: var(--c-amber);
}

/* ── Submit button ──────────────────────────────────────────────────────── */
#sg-shipping-calculator button[type="submit"] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         14px 24px;
    background:      var(--c-amber);
    color:           var(--c-bg);
    border:          none;
    border-radius:   var(--c-radius);
    font-family:     var(--c-font-h);
    font-size:       1rem;
    font-weight:     800;
    letter-spacing:  0.07em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background 0.15s, transform 0.1s, box-shadow 0.15s;
}

#sg-shipping-calculator button[type="submit"]:hover:not(:disabled) {
    background:  var(--c-amber2);
    box-shadow:  0 4px 16px rgba(245,166,35,0.3);
    transform:   translateY(-1px);
}

#sg-shipping-calculator button[type="submit"]:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* ── Error ──────────────────────────────────────────────────────────────── */
#sg-shipping-calculator #sgc-error {
    margin:      0 30px 20px;
    padding:     12px 16px;
    background:  rgba(211,47,47,0.15);
    border:      1px solid rgba(211,47,47,0.3);
    border-radius: var(--c-radius);
    color:       #ff8080;
    font-size:   0.875rem;
}

/* ── Results ────────────────────────────────────────────────────────────── */
#sg-shipping-calculator #sgc-results {
    padding:    0 30px 28px;
}

#sg-shipping-calculator #sgc-meta {
    padding:     12px 16px;
    background:  var(--c-soft);
    border-radius: var(--c-radius);
    font-size:   0.8rem;
    color:       var(--c-muted);
    border-left: 3px solid var(--c-amber);
    line-height: 1.7;
    margin-bottom: 16px;
}

#sg-shipping-calculator #sgc-meta strong {
    color: var(--c-light);
}

/* Legend */
#sg-shipping-calculator .sgc-legend {
    display:  flex;
    flex-wrap: wrap;
    gap:      10px 20px;
    padding:  11px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--c-radius);
    margin-bottom: 14px;
    font-size: 0.78rem;
    color:    var(--c-muted);
}

#sg-shipping-calculator .sgc-legend strong {
    color: var(--c-light);
}

/* Carrier grid */
#sg-shipping-calculator .sgc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#sg-shipping-calculator .sgc-col {
    background:   var(--c-soft);
    border-radius: var(--c-radius);
    border:       1px solid var(--c-border);
    overflow:     hidden;
}

#sg-shipping-calculator .sgc-col-head {
    padding:     11px 16px;
    font-family: var(--c-font-h);
    font-size:   1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:       white;
}

#sg-shipping-calculator .sgc-fedex-head { background: var(--c-fedex); }
#sg-shipping-calculator .sgc-dhl-head   { background: var(--c-dhl);   }

/* Rate rows */
#sg-shipping-calculator .sgc-rate-row {
    display:     flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:         10px;
    padding:     13px 16px;
    border-bottom: 1px solid var(--c-border);
    transition:  background 0.12s;
}

#sg-shipping-calculator .sgc-rate-row:last-child {
    border-bottom: none;
}

#sg-shipping-calculator .sgc-rate-row:hover {
    background: rgba(255,255,255,0.03);
}

#sg-shipping-calculator .sgc-rate-row.unavailable {
    opacity: 0.45;
}

#sg-shipping-calculator .sgc-rate-info {
    flex:    1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#sg-shipping-calculator .sgc-rate-name {
    font-family: var(--c-font-h);
    font-size:   0.9rem;
    font-weight: 700;
    color:       var(--c-light);
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    line-height: 1.2;
}

#sg-shipping-calculator .sgc-rate-desc {
    font-size: 0.72rem;
    color:     var(--c-muted);
    line-height: 1.3;
}

#sg-shipping-calculator .sgc-rate-cost {
    flex-shrink: 0;
    text-align:  right;
    display:     flex;
    flex-direction: column;
    align-items: flex-end;
}

#sg-shipping-calculator .sgc-price {
    font-family: var(--c-font-h);
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--c-amber);
    white-space: nowrap;
    line-height: 1;
}

#sg-shipping-calculator .sgc-price-label {
    font-size:   0.65rem;
    color:       var(--c-muted);
    font-family: var(--c-font-h);
    font-weight: 600;
    letter-spacing: 0.05em;
}

#sg-shipping-calculator .sgc-na {
    font-size:   0.75rem;
    color:       var(--c-muted);
    font-style:  italic;
    text-align:  right;
    line-height: 1.3;
}

#sg-shipping-calculator .sgc-na small {
    display:   block;
    font-size: 0.65rem;
    font-style: normal;
}

/* Dots */
#sg-shipping-calculator .sgc-dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

#sg-shipping-calculator .sgc-dot-ipe { background: #f5a623; }
#sg-shipping-calculator .sgc-dot-ip  { background: #4fc3f7; }
#sg-shipping-calculator .sgc-dot-ie  { background: #81c784; }

/* Badge */
#sg-shipping-calculator .sgc-badge {
    font-size:       0.58rem;
    font-weight:     800;
    letter-spacing:  0.08em;
    padding:         2px 5px;
    background:      var(--c-amber);
    color:           var(--c-bg);
    border-radius:   3px;
}

/* DHL not configured notice */
#sg-shipping-calculator .sgc-uncfg {
    padding:   16px;
    font-size: 0.8rem;
    color:     var(--c-muted);
    line-height: 1.5;
}

/* Disclaimer */
#sg-shipping-calculator .sgc-disclaimer {
    margin-top: 16px;
    font-size:  0.72rem;
    color:      rgba(143,164,191,0.6);
    text-align: center;
    line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 580px) {
    #sg-shipping-calculator .sgc-header { padding: 18px 18px; }
    #sg-shipping-calculator form        { padding: 18px 18px; }
    #sg-shipping-calculator #sgc-error  { margin: 0 18px 16px; }
    #sg-shipping-calculator #sgc-results{ padding: 0 18px 22px; }
    #sg-shipping-calculator .sgc-grid   { grid-template-columns: 1fr; }
    #sg-shipping-calculator .sgc-title  { font-size: 1.35rem; }
    #sg-shipping-calculator .sgc-route-bar { gap: 10px; }
}