/* =========================================================
FILE: my_account.css
VERSION: v6
PURPOSE: Styling for My Account / Repair Tracker system
========================================================= */


/* =========================================================
LAYOUT WRAPPER
========================================================= */

.dashboard_wrap{
    max-width:1180px;
    margin:0 auto;
}

.dashboard_notice{
    margin-bottom:1.5rem;
    text-align:center;
}


/* =========================================================
PASSWORD WARNING (PILL STYLE)
========================================================= */

.dashboard_notice .jd_form_message{
    display:inline-block;
    width:100%;
    padding:0.7rem 1.35rem;
    border-radius:999px;
    background:linear-gradient(to bottom,#f4b7b7 0%,#d98f8f 100%);
    border:2px solid #ff1f1f;
    color:#ffffff;
    font-weight:700;
    box-shadow:0 10px 20px rgba(0,0,0,0.16);
    text-align:center;
}


/* =========================================================
INTRO SECTION
========================================================= */

.dashboard_intro{
    text-align:center;
    padding:0 0 0.25rem 0;
    margin-bottom:0;
}

.dashboard_intro .eyebrow{
    display:inline-block;
    margin-bottom:0.6rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#8a6500;
}

.dashboard_intro h2{
    margin:0 0 0.75rem 0;
    font-size:clamp(2rem,4vw,3.15rem);
    line-height:1.05;
}

.dashboard_intro p{
    margin:0 auto;
    max-width:760px;
}

.dashboard_intro.dashboard_intro_no_title{
    padding-top:0;
}


/* =========================================================
DIVIDER
========================================================= */

.dashboard_divider{
    width:100%;
    height:1px;
    background:#9a9a9a;
    margin:1.75rem 0;
}


/* =========================================================
STATS BOXES
========================================================= */

.dashboard_stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1.5rem;
}

.dashboard_stat_box{
    padding:1.5rem 1rem;
    border:1px solid #111;
    box-shadow:0 12px 24px rgba(0,0,0,0.14);
    text-align:center;
    border-radius:12px;
    color:#111;
    text-decoration:none;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard_stat_box:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(0,0,0,0.2);
}

.dashboard_stat_box.stat_one{
    background:linear-gradient(to bottom,#a7caef 0%,#dbe8f6 100%);
}

.dashboard_stat_box.stat_two{
    background:linear-gradient(to bottom,#f6ea8b 0%,#f5efbf 100%);
}

.dashboard_stat_box.stat_three{
    background:linear-gradient(to bottom,#9ee199 0%,#ddf6db 100%);
}

.dashboard_stat_label{
    display:block;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#8a6500;
    margin-bottom:0.55rem;
}

.dashboard_stat_value{
    display:block;
    font-size:2.5rem;
    line-height:1;
    font-weight:700;
    margin-bottom:0.55rem;
}

.dashboard_stat_text{
    display:block;
    color:#222;
}


/* =========================================================
MAIN ACTION BUTTONS
========================================================= */

.dashboard_action_row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1.25rem;
}

.dashboard_action_btn,
.dashboard_side_btn{
    display:inline-block;
    text-align:center;
    padding:0.95rem 1rem;
    border:1px solid #111;
    background:#ffffff;
    color:#111;
    text-decoration:none;
    font-weight:700;
    border-radius:999px;
    box-shadow:0 10px 22px rgba(0,0,0,0.12);
    transition:all 0.2s ease;
}

.dashboard_action_btn:hover,
.dashboard_side_btn:hover{
    background:#111;
    color:#ffffff;
    border:1px solid #ffffff;
    box-shadow:0 14px 28px rgba(0,0,0,0.22);
}


/* =========================================================
LOWER SECTION (DETAILS + SIDE)
========================================================= */

.dashboard_lower{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:1.5rem;
    align-items:start;
}


/* =========================================================
DETAILS BOX
========================================================= */

.dashboard_details_box{
    background:#f4f4f4;
    border:1px solid #555;
    box-shadow:0 12px 24px rgba(0,0,0,0.14);
    border-radius:12px;
    padding:clamp(1.35rem,2.2vw,2rem);
}

.dashboard_details_box .eyebrow{
    display:inline-block;
    margin-bottom:0.55rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#8a6500;
}

.dashboard_details_box h3{
    margin:0 0 1.1rem 0;
}

.dashboard_details_grid{
    display:grid;
    grid-template-columns:minmax(170px,220px) 1fr;
    gap:0.8rem 1rem;
}

.dashboard_details_label{
    font-weight:700;
    color:#111;
}

.dashboard_details_value{
    color:#111;
}


/* =========================================================
SIDE BOX
========================================================= */

.dashboard_side_box{
    background:#f4f4f4;
    border:1px solid #555;
    box-shadow:0 12px 24px rgba(0,0,0,0.14);
    border-radius:12px;
    padding:clamp(1.35rem,2.2vw,2rem);
}

.dashboard_side_box .eyebrow{
    display:inline-block;
    margin-bottom:0.55rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#8a6500;
}

.dashboard_side_box h3{
    margin:0 0 1.1rem 0;
}

.dashboard_side_actions{
    display:grid;
    gap:0.9rem;
    margin-top:1rem;
}

.dashboard_side_actions_2x2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0.9rem;
}


/* =========================================================
ONLINE REPAIRS GRID
========================================================= */

.online_repairs_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.2rem;
}

.online_repair_card{
    background:#ffffff;
    border:1px solid #454545;
    border-radius:12px;
    box-shadow:0 10px 20px rgba(0,0,0,0.12);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.online_repair_card.online_repair_card_grey{
    background:#F4F4F4;
    border:1px solid #454545;
    box-shadow:0 0px 10px #666;
    border-radius:12px;
}

.orc_header{
    background:linear-gradient(to bottom,#6f6f6f,#4f4f4f);
    padding:0.8rem 1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-weight:700;
    color:#ffffff;
    border-bottom:1px solid #3f3f3f;
}

.orc_ref{
    font-size:0.9rem;
    color:#ffffff;
    text-align:center;
    width:100%;
}

.orc_status{
    font-size:0.85rem;
    color:#555;
}

.orc_body{
    padding:1rem;
    flex:1;
}

.orc_row{
    margin-bottom:0.5rem;
    font-size:0.95rem;
}

.orc_price{
    margin-top:0.75rem;
    font-size:1.3rem;
    font-weight:700;
}

.orc_footer{
    padding:1rem;
    border-top:1px solid #eee;
    text-align:center;
}

.orc_status_red{
    color:#b10000;
    font-weight:700;
}

.orc_status_green{
    color:#1f7a1f;
    font-weight:700;
}

/* =========================================================
ACCOUNT PAGES - ONLINE QUOTES / DETAILS
========================================================= */

.account_panel_box{
    background:#efefef;
    border:1px solid #555;
    box-shadow:0 12px 24px rgba(0,0,0,0.14);
    border-radius:12px;
}

.account_quote_header_box{
    text-align:center;
    margin:0 0 1rem 0;
}

.account_quote_header_box h2{
    margin:0;
    font-size:1.6rem;
    line-height:1.2;
    font-weight:600;
}

.account_quote_header_box .ref_prefix{
    font-weight:400;
    margin-right:0.4rem;
    color:#666;
}

.account_quote_stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin:0 0 1.5rem 0;
}

.account_stat_box{
    min-height:140px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1.35rem 1rem;
}

.account_stat_yellow{
    background:#f5efbf !important;
}

.account_stat_blue{
    background:#dbe8f6 !important;
}

.account_stat_red{
    background:#f4d8d8 !important;
}

.account_stat_green{
    background:#d9efd7 !important;
}

.account_stat_value_small{
    display:block;
    font-size:1.35rem;
    line-height:1.35;
    font-weight:700;
    color:#111;
}

.account_two_col_equal{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin:0 0 1.5rem 0;
    align-items:start;
}

.account_status_grid{
    grid-template-columns:minmax(150px,190px) 1fr;
}

.account_text_block{
    white-space:pre-line;
    line-height:1.75;
}

.account_total_estimate_line{
    font-size:1.25rem;
    line-height:1.4;
    color:#111;
    margin-bottom:0.25rem;
}

.account_image_wrap{
    padding:1rem;
    cursor:pointer;
}

.account_quote_image{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
    transition:transform 0.2s ease;
}

.account_quote_image:hover{
    transform:scale(1.03);
}

.account_images_grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem;
    text-align:center;
}

.account_action_row_two,
.account_action_row_two_bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.account_action_row_two{
    margin:0 0 1.5rem 0;
}

.account_action_row_two_bottom{
    margin:1.5rem 0 0 0;
}

.account_action_row_two .dashboard_action_btn,
.account_action_row_two_bottom .dashboard_action_btn{
    min-width:260px;
}

.account_section_gap{
    margin-bottom:1.5rem;
}


/* =========================================================
LIGHTBOX
========================================================= */

.lightbox_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:1.5rem;
    box-sizing:border-box;
}

.lightbox_overlay img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    box-shadow:0 18px 36px rgba(0,0,0,0.35);
}

.lightbox_overlay.active{
    display:flex;
}


/* =========================================================
ADDRESS FORMS
========================================================= */

.account_address_form{
    margin-top:0.5rem;
}

.account_form_grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:1rem 1.25rem;
}

.account_form_label{
    display:block;
    margin-bottom:0.45rem;
    font-weight:700;
    color:#111;
}

.account_form_hint{
    margin-top:0.35rem;
    font-size:0.9rem;
    color:#666;
    line-height:1.5;
}

.account_form_note{
    margin:0;
    font-size:0.95rem;
    color:#555;
    line-height:1.65;
}


/* =========================================================
REPAIR HISTORY
========================================================= */

.repair_history_grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 900px){

    .dashboard_stats,
    .dashboard_action_row,
    .dashboard_lower,
    .account_quote_stats,
    .account_two_col_equal{
        grid-template-columns:1fr;
    }

    .repair_history_grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 640px){

    .dashboard_wrap{
        max-width:100%;
    }

    .dashboard_intro p{
        max-width:100%;
        font-size:0.98rem;
        line-height:1.6;
    }

    .dashboard_divider{
        margin:1.2rem 0;
    }

    .dashboard_notice .jd_form_message{
        border-radius:18px;
    }

    .dashboard_details_box,
    .dashboard_side_box,
    .account_panel_box,
    .online_repair_card.online_repair_card_grey{
        padding:1rem;
        border-radius:10px;
    }

    .dashboard_details_box h3,
    .dashboard_side_box h3{
        margin:0 0 0.85rem 0;
        font-size:1.8rem;
    }

    .dashboard_details_grid,
    .account_status_grid{
        grid-template-columns:1fr;
        gap:0.18rem 0;
    }

    .dashboard_details_label{
        font-size:1rem;
        line-height:1.35;
        margin-top:0.45rem;
    }

    .dashboard_details_label:first-child{
        margin-top:0;
    }

    .dashboard_details_value{
        font-size:1rem;
        line-height:1.5;
        margin-bottom:0.2rem;
    }

    .account_quote_header_box{
        margin-bottom:0.75rem;
    }

    .account_quote_header_box h2{
        font-size:1.2rem;
        line-height:1.35;
    }

    .account_quote_header_box .ref_prefix{
        display:block;
        margin:0 0 0.2rem 0;
    }

    .account_quote_stats{
        gap:0.75rem;
        margin-bottom:1rem;
    }

    .account_stat_box{
        min-height:auto;
        padding:1rem 0.85rem;
    }

    .dashboard_stat_label{
        font-size:0.76rem;
        margin-bottom:0.35rem;
    }

    .account_stat_value_small{
        font-size:1.05rem;
        line-height:1.45;
    }

    .account_two_col_equal{
        gap:1rem;
        margin-bottom:1rem;
    }

    .account_section_gap{
        margin-bottom:1rem;
    }

    .account_text_block{
        font-size:0.98rem;
        line-height:1.65;
    }

    .account_total_estimate_line{
        font-size:1.1rem;
    }

    .account_images_grid{
        grid-template-columns:1fr;
        gap:0.85rem;
    }

    .account_image_wrap{
        padding:0.65rem;
    }

    .account_quote_image{
        border-radius:6px;
    }

    .account_action_row_two,
    .account_action_row_two_bottom{
        gap:0.75rem;
        margin-left:0;
        margin-right:0;
    }

    .account_action_row_two .dashboard_action_btn,
    .account_action_row_two_bottom .dashboard_action_btn{
        min-width:100%;
        width:100%;
        padding:0.9rem 1rem;
    }

    .online_repairs_grid{
        grid-template-columns:1fr;
        gap:1rem;
    }

    .orc_body{
        padding:0.9rem;
    }

    .orc_row{
        font-size:0.95rem;
        line-height:1.5;
    }

    .orc_footer{
        padding:0.9rem;
    }

    .repair_history_grid{
        grid-template-columns:1fr;
    }

    .account_form_grid{
        grid-template-columns:1fr;
    }

    .dashboard_side_actions_2x2{
        grid-template-columns:1fr;
    }
}