/* ms_withdrawalue – front-end styles v2
 * Color scheme: dark teal / emerald
 * Framework-agnostic: works on Classic, Hummingbird and custom themes.
 */

:root {
    --ms-primary:    #17a589;
    --ms-primary-dk: #0e6655;
    --ms-primary-bg: #e8f8f5;
    --ms-primary-bd: #a2d9ce;
    --ms-text:       #2c3e50;
    --ms-muted:      #7f8c8d;
    --ms-border:     #dfe6e9;
    --ms-shadow:     0 2px 14px rgba(0,0,0,.09);
}


#module-ms_withdrawalue-withdraw .ms-card-body p,
#module-ms_withdrawalue-withdraw .ms-card-body span,
#module-ms_withdrawalue-withdraw .ms-card-body label,
#module-ms_withdrawalue-withdraw .ms-product-table label {
    color: var(--ms-text);
} 

/* ---- Wrapper ---- */
.ms-returnsue-wrap {
    max-width: 780px;
    margin: 0 auto 2.5rem;
}

/* ---- Card component ---- */
.ms-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 10px;
    box-shadow: var(--ms-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    color: var(--ms-text) !important;
}

.ms-card-header {
    background: var(--ms-primary-dk);
    color: #fff;
    padding: .7rem 1.25rem;
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.ms-card-header .material-icons {
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
    opacity: .85;
}

.ms-card-header--light {
    background: var(--ms-primary-bg);
    color: var(--ms-primary-dk);
    border-bottom: 1px solid var(--ms-primary-bd);
}

.ms-card-body {
    padding: 1.25rem 1.5rem;
}

/* ---- Legacy info box (kept for fallback) ---- */
.ms-returnsue-info-box {
    background: var(--ms-primary-bg);
    border-left: 4px solid var(--ms-primary);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}
.ms-returnsue-info-box p:last-child { margin-bottom: 0; }

/* ---- Step indicator ---- */
.ms-returnsue-steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ms-step { padding: .35rem .9rem; border-radius: 20px; background: #ecf0f1; color: var(--ms-muted); font-size: .85rem; }
.ms-step.active    { background: var(--ms-primary); color: #fff; font-weight: 600; }
.ms-step.completed { background: #27ae60; color: #fff; }

/* ---- Forms ---- */
.ms-returnsue-form .form-group { margin-bottom: 1rem; }
.ms-returnsue-form label.required::after { content: " *"; color: #c0392b; }

/* ---- Declaration text ---- */
.ms-returnsue-declaration-text {
    background: #fdfaf0;
    border: 1px solid #f0e4a0;
    padding: .85rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    font-style: italic;
    color: #6b5a00;
}

/* ---- Summary table ---- */
.ms-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.ms-summary-table th,
.ms-summary-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ms-border);
    text-align: left;
    vertical-align: top;
}
.ms-summary-table th {
    width: 35%;
    font-weight: 600;
    color: var(--ms-muted);
    white-space: nowrap;
    background: #f8f9fa;
}

/* ---- Warning box ---- */
.ms-returnsue-warning {
    background: #fef9e7;
    border-left: 4px solid #d68910;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 6px;
}

/* ---- Buttons ---- */
.ms-btn-withdraw,
.ms-btn-confirm-withdrawal { margin-right: .5rem; }

.ms-btn-withdraw {
    background-color: var(--ms-primary) !important;
    border-color: var(--ms-primary-dk) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .2s;
}
.ms-btn-withdraw:hover,
.ms-btn-withdraw:focus {
    background-color: var(--ms-primary-dk) !important;
    color: #fff !important;
}
.ms-btn-confirm-withdrawal { font-size: 1.05rem; font-weight: 600; padding: .6rem 1.4rem; border-radius: 6px; }

/* ---- Success ---- */
.ms-returnsue-success .alert-success {
    padding: 1.5rem;
    border-radius: 10px;
    background: #eafaf1;
    border-color: #a9dfbf;
    border-left: 5px solid #27ae60;
}

/* ---- Hook links ---- */
.ms-returnsue-footer-link  { list-style: none; margin: .25rem 0; }
.ms-returnsue-account-link { margin: .5rem 0; }
.ms-returnsue-account-link .ms-withdrawal-link { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }

/* ---- Product selection – card-like block ---- */
.ms-product-selection {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 10px;
    box-shadow: var(--ms-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.ms-product-selection > h3 {
    font-size: .93rem;
    font-weight: 700;
    color: #fff;
    background: var(--ms-primary-dk);
    margin: 0;
    padding: .7rem 1.25rem;
    letter-spacing: .02em;
}
.ms-product-hint {
    font-size: .9rem;
    color: var(--ms-muted);
    margin: .75rem 1.25rem .5rem;
}

/* ---- Reasons group – card-like block ---- */
.ms-reasons-group {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 10px;
    box-shadow: var(--ms-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: 0;
}
.ms-reasons-group > h3 {
    font-size: .93rem;
    font-weight: 700;
    color: #fff;
    background: var(--ms-primary-dk);
    margin: 0 0 .75rem;
    padding: .7rem 1.25rem;
    letter-spacing: .02em;
}
.ms-reasons-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
    margin: 0 1.25rem .75rem;
}
#ms-reason-other-wrap { margin: 0 1.25rem 1rem; }

/* ---- Product table ---- */
.ms-product-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}
.ms-product-table th,
.ms-product-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--ms-border);
    vertical-align: middle;
}
.ms-product-table thead th {
    background: #f0fdf9;
    font-weight: 600;
    font-size: .875rem;
    color: var(--ms-primary-dk);
    border-bottom: 2px solid var(--ms-primary-bd);
}

.ms-col-check   { width: 50px; text-align: center; }
.ms-col-thumb   { width: 56px; text-align: center; padding: 4px !important; }
.ms-col-ordered { width: 80px; }
.ms-col-qty     { width: 120px; }

.ms-product-thumb {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--ms-border);
    background: #fff;
    display: block;
    margin: 0 auto;
}
.ms-qty-input { width: 80px; text-align: center; display: inline-block; }
.ms-product-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--ms-primary); }
.ms-product-label { cursor: pointer; margin-bottom: 0; font-weight: normal; }
.ms-ref   { color: var(--ms-muted); margin-left: .25rem; }
.ms-attrs { color: #666; }
.ms-product-row.ms-row-unchecked td { opacity: .45; }
.ms-product-row.ms-row-unchecked .ms-product-checkbox { opacity: 1; }

/* ---- Confirmation products table ---- */
.ms-products-heading { font-size: .95rem; margin: 1rem 0 .5rem; font-weight: 600; color: var(--ms-primary-dk); }
.ms-summary-products-table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; font-size: .92rem; }
.ms-summary-products-table th,
.ms-summary-products-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--ms-border); vertical-align: middle; }
.ms-summary-products-table thead th { font-weight: 600; color: var(--ms-muted); font-size: .85rem; background: #f8f9fa; }

/* ---- Deadline countdown ---- */
.ms-deadline-box    { border-radius: 8px; font-size: .95rem; margin: .75rem 1.25rem; }
.ms-deadline-urgent { border-left: 4px solid #e2a03f; }
.ms-deadline-last   { border-left: 4px solid #c0392b; font-size: 1rem; }

/* ---- Reason chips ---- */
.ms-reason-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 14px;
    border: 1.5px solid var(--ms-border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
    font-size: .875rem;
    background: #fff;
    color: var(--ms-text);
    margin-bottom: 0;
    min-height: 44px;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.ms-reason-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ms-reason-label:hover    { border-color: var(--ms-primary); background: var(--ms-primary-bg); color: var(--ms-primary-dk); }
.ms-reason-label--active  { border-color: var(--ms-primary); background: var(--ms-primary-bg); color: var(--ms-primary-dk); font-weight: 700; }
.ms-reasons-group { margin-bottom: 1.25rem; }

/* ---- Confirmation modal ---- */
.ms-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 9999;
    align-items: center; justify-content: center; padding: 1rem;
}
.ms-modal-box {
    background: #fff; border-radius: 14px;
    box-shadow: 0 10px 48px rgba(0,0,0,.25);
    max-width: 420px; width: 100%;
    padding: 2rem 2rem 1.5rem; text-align: center;
    animation: msModalIn .18s ease;
}
@keyframes msModalIn {
    from { transform: scale(.93); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.ms-modal-icon         { font-size: 2.8rem; color: #c0392b; line-height: 1; margin-bottom: .5rem; }
.ms-modal-box h3       { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 700; color: #222; }
.ms-modal-box p        { color: var(--ms-muted); font-size: .95rem; margin-bottom: 1.4rem; }
.ms-modal-buttons      { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.ms-modal-buttons .btn { min-width: 130px; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 575px) {
    .ms-col-ordered            { display: none; }
    .ms-qty-input              { width: 65px; }
    .ms-summary-table th       { width: 40%; font-size: .85rem; }
    .ms-btn-confirm-withdrawal { width: 100%; margin-right: 0; margin-bottom: .5rem; }
    .ms-btn-cancel             { width: 100%; }
    .ms-card-body               { padding: 1rem; }
    .ms-reasons-list           { margin: 0 .75rem .75rem; }
    .ms-product-hint           { margin: .5rem .75rem; }
    .ms-deadline-box           { margin: .5rem .75rem; }
}