/* =========================================================
   piBrick Preorder Calculator
========================================================= */

:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --border: #d8dee8;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;

    --success: #15803d;
    --warning: #b45309;
    --danger: #dc2626;

    --text: #1f2937;
    --muted: #6b7280;

    --shadow: 0 8px 24px rgba(0,0,0,.08);

    --radius: 12px;
}

/* ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:30px;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

/* ========================================================= */

.container{
    max-width:1200px;
    margin:auto;
}

/* ========================================================= */

.hero{
    margin-bottom:25px;
}

.hero h1{
    margin:0;
    font-size:2rem;
}

.hero p{
    color:var(--muted);
    margin-top:8px;
}

/* ========================================================= */

.layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    align-items:start;
}

.layout.single-column{
    grid-template-columns:1fr;
}

/* ========================================================= */

.card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:25px;
    overflow:hidden;
}

.card-header{
    padding:18px 22px;
    border-bottom:1px solid var(--border);
}

.card-header h2{
    margin:0;
    font-size:1.1rem;
}

.card > *:not(.card-header){
    padding-left:22px;
    padding-right:22px;
}

.card-body{
    padding-left:22px;
    padding-left:22px;
}

.full-width{
    grid-column:1 / -1;
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #9ca3af;
}

/* ========================================================= */
/* Item rows */
/* ========================================================= */

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 0;
    border-bottom:1px solid #eceff3;
}

.row.row-section{
    font-size:16px;
    font-weight: 700;
    color: #000;
    background-color: #f6faff;
    border-bottom:1px solid #e3e0e8;
    padding:12px 22px 12px 22px;
    margin-left:-22px;
    margin-right:-22px;
}

.row:last-child{
    border-bottom:none;
}

.item-name{
    display:flex;
    flex-direction:column;
}

.item-name strong{
    font-size:15px;
}
.item-detail {
    margin-top: 2px;
    font-size: 0.85em;
    color: #64748b;
    line-height: 1.4;
}
.item-name small{
    color:#4f7cac;
    margin-top:4px;
    font-weight: 600;
}
.item-name .item-notice{
    color:#f60;
    margin-top: 4px;
    font-weight: 600;
    margin-left: 8px;
    font-weight: 600;
}
.item-name.item-name-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ========================================================= */
/* Inputs */
/* ========================================================= */

input,
select,
button{
    font:inherit;
}

input[type=number],
input[type=text],
select{

    width:100%;

    padding:10px 12px;

    border:1px solid var(--border);

    border-radius:8px;

    outline:none;

    background:white;

    transition:.2s;
}

input:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

input[type=number]{
    width:50px;
    padding: 10px 8px;
    text-align:center;
}


textarea{
    width:100%;
    min-height:420px;
    resize:vertical;
    border:1px solid var(--border);
    border-radius:8px;
    font:inherit;
    outline:none;

    padding: 12px 14px;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    margin-bottom: 8px;
}

textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

.copy_message-style{
    font-size: 12px;
    text-align: center;
    font-style: italic;
    padding-bottom: 22px;
}

.result-table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
    margin-bottom:10px;
}

.result-table th{

    text-align:left;

    padding:10px 12px;

    background:#f8fafc;

    border:1px solid var(--border);

    width:220px;

}

.result-table td{

    padding:10px 12px;

    border:1px solid var(--border);

}

.result-table thead th{

    background:#eef3ff;

}

.muted{

    color:var(--muted);

}

.parser-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.parser-actions button {
    padding: 8px 18px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn {
    display: inline-block;
    padding: 9px 18px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: #0d6efd;
    color: white;
}

.btn-success {
    background: #198754;
    color: white;
}

.btn-primary:hover,
.btn-success:hover {
    opacity: 0.85;
}

.alert {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
}

.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.alert-error {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* ========================================================= */
/* Shipping */
/* ========================================================= */

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin:20px 0;

}

.field{

    display:flex;

    flex-direction:column;

}

.field label{

    margin-bottom:8px;

    font-weight:600;

}

.shipping-methods{

    display:flex;

    gap:15px;

    margin:20px 0;

}

.radio-card{

    flex:1;

    border:1px solid var(--border);

    border-radius:10px;

    padding:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.2s;

}

.radio-card:hover{

    border-color:var(--primary);

}

.radio-card input{

    margin:0;

}

.radio-card strong{

    display:block;

}

.radio-card small{

    color:var(--muted);

}

/* ========================================================= */
/* Remote Status */
/* ========================================================= */

.remote-status{

    margin-top:10px;

    padding:12px;

    border-radius:8px;

    background:#eef3ff;

    color:#234;

    font-size:.95rem;

    min-height:46px;

    display:flex;

    align-items:center;

}

/* JS will toggle these */

.remote-status.success{

    background:#ecfdf5;

    color:var(--success);

}

.remote-status.warning{

    background:#fff7ed;

    color:var(--warning);

}

.remote-status.error{

    background:#fef2f2;

    color:var(--danger);

}

/* ========================================================= */
/* Invoice */
/* ========================================================= */

.sticky{

    position:sticky;

    top:20px;

}
#invoice-holder{
    margin:20px 0;
    width: 100%;
    max-width:calc(100vw - 88px);
    overflow-x: auto;
    padding: 0;
    border-radius:10px;
    background:#111827;
    color:#22c55e;
}

pre{
    padding:18px;
    font-size:14px;
    line-height:1.45;
    font-family:
        Consolas,
        "Courier New",
        monospace;
}

/* ========================================================= */
/* Button */
/* ========================================================= */

button{

    width:100%;

    border:none;

    border-radius:8px;

    padding:14px;

    cursor:pointer;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:.2s;

    margin-bottom:20px;

}

button:hover{

    background:var(--primary-hover);

}

/* ========================================================= */

footer{

    margin-top:35px;

    text-align:center;

    color:var(--muted);

    font-size:.9rem;

}

/* ========================================================= */
/* Mobile */
/* ========================================================= */

@media (max-width:900px){

    .layout{

        grid-template-columns:1fr;

    }

    .sticky{

        position:static;

    }

}

@media (max-width:640px){

    body{

        padding:16px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .shipping-methods{

        flex-direction:column;

    }

    .row{

        gap:12px;

    }

}

.reference-links{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding: 10px 5px !important;
}

.reference-links a{
    display:inline-block;
    padding:8px 10px;
    text-align: center;
    border:1px solid var(--border);
    border-radius:10px;
    color:inherit;
    text-decoration:none;
    background:#fafafa;
    transition:all .15s ease;
    font-size: 12px;
}

.reference-links a:hover{
    background:#f0f0f0;
    border-color:#bbb;
}




.modal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    justify-content: center;

    align-items: center;

    padding: 20px;

    z-index: 9999;

}


.modal-content {

    background: #fff;

    width: 100%;

    max-width: 520px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    border-radius: 8px;

    padding: 24px;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    -webkit-overflow-scrolling: touch;

}


@media (max-width: 600px) {

    .modal {

        padding: 10px;

        align-items: flex-start;

    }

    .modal-content {

        max-height: calc(100vh - 20px);

        margin: 0;

        padding: 18px;

        border-radius: 8px;

    }

}

.modal-content h2 {

    margin-top: 0;

}

.modal-content ol {

    margin: 15px 0;

    padding-left: 22px;

}

.modal-content li {

    margin-bottom: 8px;

}

.modal-actions {

    margin-top: 20px;

    text-align: right;

}

.modal-actions button {

    padding: 10px 18px;

    cursor: pointer;

}

.warning-box {

    margin-top: 20px;

    padding: 14px 16px;

    border: 1px solid #ffe08a;

    border-left: 5px solid #f0ad4e;

    background: #fff8e5;

    color: #7a5600;

    border-radius: 6px;

    line-height: 1.5;

}


.qty-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 6px;

    background: #fff;
    color: #374151;

    cursor: pointer;

    font-size: 20px;
    font-weight: bold;
    line-height: 1;

    user-select: none;
}

.qty-btn.qty-minus:hover {
    color:#f55;
    background: #fff;
}
.qty-btn.qty-plus:hover {
    color:#0a0;
    background: #fff;
}

.item-qty {
    width: 50px;
    height: 32px;

    box-sizing: border-box;
    text-align: center;

    margin: 0;
}

.qty-control.qty-disabled {
    opacity: 0.5;
    visibility: hidden;
}