/* ============================================================
   CUSTOM FREIGHT v3.0 — Frete Negociado
   ============================================================ */

:root {
    --cf-bg:            #ffffff;
    --cf-border:        #e2e2e2;
    --cf-border-focus:  #1a1a1a;
    --cf-text:          #1a1a1a;
    --cf-muted:         #6b7280;
    --cf-accent:        #1a1a1a;
    --cf-ok:            #059669;
    --cf-ok-bg:         #ecfdf5;
    --cf-ok-border:     #6ee7b7;
    --cf-warn:          #d97706;
    --cf-warn-bg:       #fffbeb;
    --cf-warn-border:   #fcd34d;
    --cf-error:         #dc2626;
    --cf-error-bg:      #fef2f2;
    --cf-radius:        10px;
    --cf-radius-sm:     7px;
    --cf-shadow:        0 1px 4px rgba(0, 0, 0, .08);
    --cf-transition:    all .2s cubic-bezier(.4, 0, .2, 1);
    --cf-font-xs:       12px;
    --cf-font-sm:       14px;
    --cf-font-md:       16px;
    --cf-font-lg:       18px;
    --cf-font-xl:       20px;
}

/* ---- Container ---- */
.cf-freight-wrap {
    background:   var(--cf-bg);
    border:       1.5px solid var(--cf-border);
    border-radius: var(--cf-radius);
    padding:      20px;
    margin:       .75rem 0 .85rem;
    transition:   var(--cf-transition);
    font-family:  inherit;
    box-sizing:   border-box;
}

.cf-freight-wrap:focus-within {
    border-color: var(--cf-border-focus);
    box-shadow:   0 0 0 3px rgba(26, 26, 26, .07);
}

.cf-cart-field-wrap {
    padding: .5rem 0 1rem;
}

/* ---- Header ---- */
.cf-freight-header {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin-bottom: .85rem;
}

.cf-freight-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      #f3f4f6;
    border-radius:   8px;
    flex-shrink:     0;
    color:           var(--cf-text);
}

.cf-freight-icon svg {
    width:  18px;
    height: 18px;
}

.cf-freight-labels {
    flex:      1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       .15rem;
}

.cf-freight-labels strong {
    font-size:     var(--cf-font-sm);
    font-weight: 700;
    color:       var(--cf-text);
    line-height: 1.3;
    display:     block;
}

.cf-freight-labels span {
    font-size:     var(--cf-font-sm);
    color:       var(--cf-muted);
    line-height: 1.3;
    display:     block;
}

/* ---- Badge ---- */
.cf-freight-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .3rem;
    padding:        .25rem .6rem;
    border-radius:  99px;
    font-size:     var(--cf-font-sm);
    font-weight:    700;
    letter-spacing: .03em;
    white-space:    nowrap;
    flex-shrink:    0;
    line-height:    1;
}

.cf-freight-badge svg {
    width:      11px;
    height:     11px;
    flex-shrink: 0;
}

.cf-badge-ok {
    background:   var(--cf-ok-bg);
    color:        var(--cf-ok);
    border:       1px solid var(--cf-ok-border);
}

.cf-badge-pending {
    background:   var(--cf-warn-bg);
    color:        var(--cf-warn);
    border:       1px solid var(--cf-warn-border);
}

/* ---- Input row ---- */
.cf-freight-input-row {
    display:     flex;
    gap:         .5rem;
    align-items: stretch;
}

.cf-freight-input-wrap {
    position:    relative;
    flex:        1;
    display:     flex;
    align-items: center;
}

.cf-freight-input {
    width:          100% !important;
    height:         44px !important;
    padding:        0 .75rem !important;
    border:         1.5px solid var(--cf-border) !important;
    border-radius:  var(--cf-radius-sm) !important;
    font-size:     var(--cf-font-sm);
    font-weight:    600 !important;
    color:          var(--cf-text) !important;
    background:     #fafafa !important;
    outline:        none !important;
    box-shadow:     none !important;
    transition:     var(--cf-transition) !important;
    font-family:    inherit !important;
    box-sizing:     border-box !important;
    -moz-appearance: textfield !important;
}

.cf-freight-input:focus {
    border-color: var(--cf-border-focus) !important;
    background:   #ffffff !important;
    box-shadow:   0 0 0 3px rgba(26, 26, 26, .06) !important;
}

.cf-freight-input.cf-has-value {
    border-color: var(--cf-ok) !important;
    background:   var(--cf-ok-bg) !important;
    color:        var(--cf-ok) !important;
}

.cf-freight-input::placeholder {
    color:       #c4c4c4;
    font-weight: 400;
}

.cf-freight-input::-webkit-outer-spin-button,
.cf-freight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Botão aplicar ---- */
.cf-freight-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             .4rem !important;
    height:          44px !important;
    padding:         0 1.2rem !important;
    background:      var(--cf-accent) !important;
    color:           #ffffff !important;
    border:          none !important;
    border-radius:   var(--cf-radius-sm) !important;
    font-size:     var(--cf-font-sm);
    font-weight:     700 !important;
    letter-spacing:  .02em !important;
    cursor:          pointer !important;
    transition:      var(--cf-transition) !important;
    white-space:     nowrap !important;
    flex-shrink:     0 !important;
    font-family:     inherit !important;
    line-height:     1 !important;
}

.cf-freight-btn:hover  { background: #333333 !important; transform: translateY(-1px); }
.cf-freight-btn:active { transform: translateY(0); }
.cf-freight-btn:disabled {
    opacity:   .6 !important;
    cursor:    not-allowed !important;
    transform: none;
}

/* ---- Spinner ---- */
.cf-spin {
    animation: cf-spin-anim .7s linear infinite;
}

@keyframes cf-spin-anim {
    to { transform: rotate(360deg); }
}

/* ---- Feedback ---- */
.cf-freight-feedback {
    margin-top:    .6rem;
    padding:       .45rem .75rem;
    border-radius: var(--cf-radius-sm);
    font-size:     var(--cf-font-sm);
    font-weight:   600;
    display:       flex;
    align-items:   center;
    gap:           .4rem;
    line-height:   1.4;
}

.cf-feedback-ok {
    background: var(--cf-ok-bg);
    color:      var(--cf-ok);
    border:     1px solid var(--cf-ok-border);
}

.cf-feedback-error {
    background: var(--cf-error-bg);
    color:      var(--cf-error);
    border:     1px solid #fca5a5;
}

/* ---- Linha frete nos totais ---- */
.cf-shipping-pending {
    font-style: italic;
    color:      var(--cf-warn);
    font-size:     var(--cf-font-sm);
}

/* ---- Status do CEP ---- */
.cf-cep-status {
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    font-size:     var(--cf-font-sm);
    font-weight: 600;
    margin-top:  .3rem;
    padding:     .2rem .5rem;
    border-radius: 4px;
}

.cf-cep-loading { color: var(--cf-muted);  background: #f3f4f6; }
.cf-cep-ok      { color: var(--cf-ok);     background: var(--cf-ok-bg); }
.cf-cep-error   { color: var(--cf-error);  background: var(--cf-error-bg); }

/* ---- Responsivo ---- */
@media (max-width: 480px) {
    .cf-freight-input-row   { flex-direction: column; }
    .cf-freight-btn         { width: 100% !important; height: 46px !important; }
    .cf-freight-labels span { display: none; }
}