/* SCOPED STYLES TO PREVENT EXTERNAL DOOM */
:root {
    --primary: #111;
    --shopify-green: #008060;
    --shopify-green-hover: #006e52;
    --bg-color: #f4f6f8;
    --card-bg: #ffffff;
    --border: #e0e0e0;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --input-bg: #fff;
}

#exchange-app-container {
    font-family: 'Inter', sans-serif;
    color: #333;
    /* Resetting some common Shopify global overrides */
    line-height: 1.5;
    text-align: left;
    box-sizing: border-box;
}

#exchange-app-container * {
    box-sizing: border-box;
}

/* UTILS */
#exchange-app-container .hidden {
    display: none !important;
}

#exchange-app-container .split-card {
    display: flex;
    background: #fff;
    width: 100%;
    max-width: 900px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: fadeIn 0.4s ease-out;
    margin: 40px auto;
    max-height: 85vh;
}

#exchange-app-container .split-image {
    flex: 1;
    background-color: #f0f0f0;
    position: relative;
    min-height: 500px;
}

#exchange-app-container .split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}

#exchange-app-container .split-form {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#exchange-app-container .split-form::-webkit-scrollbar {
    width: 6px;
}

#exchange-app-container .split-form::-webkit-scrollbar-track {
    background: transparent;
}

#exchange-app-container .split-form::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
}

/* CENTERED CARD (Steps 2-6) */
#exchange-app-container .main-container {
    background: var(--card-bg);
    width: 100%;
    max-width: 600px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    position: relative;
    animation: fadeIn 0.4s ease-out;
    margin: 40px auto;
    /* Centering helper */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HEADINGS */
#exchange-app-container h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
    margin-top: 0;
}

#wrapperMain h2 {
    text-align: center;
}

#wrapperMain #exchange-app-container h3 {
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-top: 0;
}

#exchange-app-container h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: #666;
    margin-top: 20px;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 15px;
}

#exchange-app-container .subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

/* INPUTS */
#exchange-app-container label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #555;
}

#exchange-app-container input,
#productModal input,
#exchange-app-container select,
#productModal select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.2s;
    outline: none;
    box-shadow: none;
}

#exchange-app-container input {
    /* width: auto; */
}

#exchange-app-container input:focus,
#productModal input:focus {
    outline: none;
    border-color: var(--shopify-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.15);
}

/* BUTTONS */
#exchange-app-container .btn-group {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

#exchange-app-container button,
#productModal button {
    width: 100%;
    padding: 14px;
    background: var(--shopify-green);
    color: #fff;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    line-height: normal;
    text-transform: none;
}

#exchange-app-container button:hover,
#productModal button:hover {
    background: var(--shopify-green-hover);
}

#exchange-app-container button:active,
#productModal button:active {
    transform: scale(0.98);
}

#exchange-app-container button.secondary {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
}

#exchange-app-container button.secondary:hover {
    background: #f9f9f9;
    border-color: #ccc;
}

#exchange-app-container button.btn-outline,
#productModal button.btn-outline {
    background: transparent;
    border: 1px dashed #aaa;
    color: #555;
    margin-top: 10px;
    border-radius: 8px;
}

#exchange-app-container button.btn-outline:hover {
    border-color: #333;
    color: #111;
}

#exchange-app-container button.close-btn,
#productModal button.close-btn {
    width: auto;
    padding: 5px 10px;
    border-radius: 50%;
}

/* STEPS */
#exchange-app-container .step {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

#exchange-app-container .step.active {
    display: block;
}

/* PROGRESS BAR */
#exchange-app-container .progress-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
    padding: 0 10px;
}

#exchange-app-container .progress-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #eee;
    z-index: 0;
    transform: translateY(-50%);
}

#exchange-app-container .progress-step {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    z-index: 1;
    position: relative;
    transition: all 0.3s;
    box-shadow: none;
}

#exchange-app-container .progress-step.active {
    border-color: var(--shopify-green);
    background: var(--shopify-green);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 128, 96, 0.15);
}

#exchange-app-container .progress-step.completed {
    background: var(--shopify-green);
    border-color: var(--shopify-green);
    color: #fff;
}

#productCollectionSidebar {
    display: none !important;
}

#productModal {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 600px;
    height: 90%;
    max-height: 700px;
    background: rgb(255, 255, 255);
    z-index: 10000;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-direction: column;
}

/* PRODUCTS & LISTS */
#exchange-app-container .product-row {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 40px 80px 1fr auto;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

#exchangeProduct .product-row {
    grid-template-columns: 70px 365px 1fr auto;
}

#exchange-app-container .product-row:hover {
    border-color: #ccc;
}

#exchange-app-container .product-row img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    /* background: #f0f0f0; */
    max-width: none;
}

/* INFO BOXES */
#exchange-app-container .info-box {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

#exchange-app-container .empty-state {
    font-style: italic;
    color: #999;
    text-align: center;
    padding: 20px;
}

/* POPUP ADJUSTMENTS - Need to be specific as it might end up in body */
/* Since standard modal isn't part of flow, we scope it too if inside container. 
     If moved to body by script, this might break. Assuming it stays in container based on HTML structure. */

#productModal,
#modalOverlay {
    font-family: 'Inter', sans-serif;
}

#productModal h3 {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #exchange-app-container .split-card {
        flex-direction: column;
        max-width: 400px;
    }

    #exchange-app-container .split-image {
        min-height: 200px;
    }

    #exchange-app-container .split-form {
        padding: 30px;
    }
}

/* PRICE COMPARISON */
.price-comparison-container {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.price-comparison-container h4 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    color: #333 !important;
}

.comparison-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.price-card {
    flex: 1;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

.price-card .label {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    display: block;
}

.price-card .amount {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
    display: block;
}

.price-card .count {
    font-size: 12px;
    color: #999;
}

.difference-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

.difference-card .diff-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--shopify-green);
    margin-bottom: 5px;
    display: block;
}

.difference-card .diff-amount.negative {
    color: #d32f2f;
    /* Red for negative/pay */
}

.difference-card .diff-note {
    font-size: 11px;
    color: #999;
    margin-bottom: 15px;
    display: block;
}

@media (max-width: 480px) {
    .comparison-cards {
        flex-direction: row;
    }

    .price-card {
        padding: 10px 5px;
    }

    .price-card .amount {
        font-size: 16px;
    }
}

/* SHIP ON YOUR OWN & ADDRESS */
.ship-method-card {
    border: 1px solid var(--shopify-green);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.ship-method-card .icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ship-method-card .icon-box svg {
    width: 32px;
    height: 32px;
    fill: var(--shopify-green);
}

.ship-method-card h5 {
    margin: 0 0 5px 0;
    font-size: 15px;
    color: #333;
    font-weight: 700;
}

.ship-method-card p {
    margin: 0;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

.address-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.address-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--shopify-green);
    margin-bottom: 0 !important;
    /* Override global input margin */
    cursor: pointer;
}

.address-details {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.address-details strong {
    display: block;
    color: #333;
    margin-bottom: 4px;
    font-size: 15px;
}

/* TOAST NOTIFICATIONS */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toast {
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    background: #d32f2f;
}

.toast.success {
    background: var(--shopify-green);
}

/* INLINE VALIDATION */
.error-msg {
    color: #d32f2f;
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 15px;
    display: none;
    padding-left: 20px;
}

.field-error {
    border-color: #d32f2f !important;
    background-color: #fff8f8 !important;
}

/* TABS & TRACKING */
.tabs-container {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.tab-btn {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #999;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: #666;
}

.tab-btn.active {
    color: var(--shopify-green);
    border-bottom: 3px solid var(--shopify-green);
}

.track-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px !important;
    margin-bottom: 5px !important;
    font-weight: 700;
    color: #222;
}

.track-status-card {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #fff !important;
}

.track-status-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
    align-items: center;
}

.track-status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.track-status-date {
    font-size: 12px;
    color: #777;
    margin-bottom: 15px;
}

.track-error-card {
    padding: 15px;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    font-size: 14px;
}