/* ==========================================================
   Global Jewellery Package - shared UI theme
   Loaded LAST on every page so it overrides bootstrap/legacy CSS.
   ========================================================== */

:root {
    --gj-maroon: #6e1423;
    --gj-maroon-dark: #4a0d18;
    --gj-gold: #c9a24a;
    --gj-gold-light: #f3e6c4;
    --gj-gold-soft: #fbf4e2;
    --gj-ivory: #faf7f2;
    --gj-ink: #2b2522;
    --gj-muted: #7a6f68;
    --gj-line: #e6ddd0;
    --gj-field: #ffffff;
    --gj-field-ro: #f5f1ea;
    --gj-success: #2f7d5b;
    --gj-danger: #b23b3b;
    --gj-radius: 10px;
    --gj-shadow: 0 6px 24px rgba(74, 13, 24, 0.10);
}

/* ---------- Page ---------- */
html, body {
    background: var(--gj-ivory);
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--gj-ink);
    margin: 0 auto;
    padding-bottom: 40px;
    text-align: left;
    background-image: linear-gradient(180deg, #f6efe3 0%, var(--gj-ivory) 260px);
    background-attachment: fixed;
    box-shadow: none;
}

body.app-narrow {
    max-width: 600px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
    background-color: var(--gj-ivory);
    min-height: 100vh;
}

/* ---------- Header bar ---------- */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 60px;
    padding: 0 16px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gj-maroon-dark), var(--gj-maroon));
    border-bottom: 3px solid var(--gj-gold);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topnav a,
.topnav a:hover,
.topnav a:focus {
    float: none;
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    color: var(--gj-gold-light);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.topnav .brand-mark {
    color: var(--gj-gold);
    margin-right: 8px;
    font-size: 20px;
}

.topnav .signout,
.topnav .signout:hover {
    width: 38px;
    height: 38px;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 74, 0.6);
    transition: background-color .2s;
}

.topnav .signout:hover {
    background: rgba(201, 162, 74, 0.2);
}

.topnav .signout .fa {
    color: var(--gj-gold-light);
    font-size: 16px;
}

/* old floated-icon rules from the master pages */
.topnav .icon {
    position: static;
    float: none;
}

@media screen and (max-width: 600px) {
    .topnav a { font-size: 15px; letter-spacing: 1px; }
}

/* ---------- Content cards ---------- */
.page-wrap {
    padding: 12px;
}

.sales,
.printview,
.gj-card {
    float: none;
    width: auto;
    background: #ffffff;
    border: 1px solid var(--gj-line) !important;
    border-radius: var(--gj-radius);
    box-shadow: var(--gj-shadow);
    padding: 14px 12px;
    margin: 0 0 14px 0;
    height: auto;
    overflow-x: auto;
}

/* wide layout (Sales): form + print preview side by side */
@media (min-width: 1100px) {
    .app-wide .page-wrap:has(> .sales) {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: flex-start;
    }
    .app-wide .page-wrap > .sales { flex: 0 1 640px; margin: 0; }
    .app-wide .page-wrap > .printview { flex: 1 1 460px; margin: 0; }
    .app-wide .page-wrap > script { display: none; }
}

.sales > .row,
.printview > .row {
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
}

.printview .row + .row {
    margin-top: 10px;
}

/* bootstrap rows inside a card: keep them within the card's padding */
.gj-card > .row { margin-left: -6px; margin-right: -6px; }
.gj-card > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

.page-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--gj-maroon);
    margin: 0;
}

/* ---------- Form tables (estimation / sales / photo) ---------- */
.sales table {
    border-collapse: separate;
    border-spacing: 0;
}

.sales td {
    padding: 3px 4px;
    vertical-align: middle;
}

.sales span {
    color: var(--gj-muted);
    font-size: 13px;
    font-weight: 500;
}

/* the column headings "Particulars / Weight" */
#ContentPlaceHolder1_LblParticulars,
#ContentPlaceHolder1_LblWeight {
    color: var(--gj-maroon);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* divider lines */
.hl1,
.hl {
    position: static;
    height: 1px;
    width: 100%;
    margin: 4px 0;
    background: var(--gj-line);
    border: none;
}

.hl1 {
    background: linear-gradient(90deg, transparent, var(--gj-gold), transparent);
}

/* ---------- Inputs ---------- */
.txtboxes,
.txtboxes1,
.txtboxesD,
.smtxtboxes {
    height: 30px;
    padding: 4px 8px;
    margin: 2px;
    font-family: inherit;
    font-size: 13px;
    color: var(--gj-ink);
    background: var(--gj-field);
    border: 1px solid #d8cfc2;
    border-radius: 6px;
    box-shadow: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    max-width: 100%;
}

.txtboxes { width: 96px; }
.txtboxes1 { width: 220px; }
.smtxtboxes { width: 52px; }

.txtboxes:focus,
.txtboxes1:focus,
.smtxtboxes:focus,
.form-control:focus {
    border-color: var(--gj-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25);
}

/* read-only (calculated) fields */
.txtboxes[disabled],
.txtboxes1[disabled],
.smtxtboxes[disabled],
.txtboxes.aspNetDisabled,
.txtboxes1.aspNetDisabled,
.smtxtboxes.aspNetDisabled {
    background: var(--gj-field-ro);
    border-color: transparent;
    color: var(--gj-ink);
    font-weight: 600;
    cursor: default;
    -webkit-text-fill-color: var(--gj-ink);
    opacity: 1;
}

/* fields the user is expected to type in (wastage %, making, stone amt) */
.txtboxes.editable,
.smtxtboxes.editable {
    background: var(--gj-gold-soft);
    border: 1px solid var(--gj-gold);
    font-weight: 600;
    padding: 4px;
    min-width: 46px;
}

/* product-code entry is the main action on the page */
#ContentPlaceHolder1_TxtProdCode {
    width: 110px;
    height: 34px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--gj-gold);
}

.lbltxt {
    font-size: 10px;
    color: var(--gj-muted);
}

.form-control {
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d8cfc2;
    box-shadow: none;
}

/* ---------- Totals ---------- */
#ContentPlaceHolder1_TxtTotBAmt {
    width: 120px;
    height: 34px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gj-maroon);
    background: var(--gj-gold-light);
    -webkit-text-fill-color: var(--gj-maroon);
    border: 1px solid var(--gj-gold);
}

#ContentPlaceHolder1_LblTotBAmt {
    color: var(--gj-maroon);
    font-weight: 700;
}

.sales td.final-price-cell {
    padding-top: 14px;
}

.final-price {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gj-maroon-dark), var(--gj-maroon));
    box-shadow: var(--gj-shadow);
}

.final-price span,
.sales .final-price span {
    color: var(--gj-gold-light);
    font-size: 15px;
    font-weight: 500;
}

.final-price .amount,
.sales .final-price .amount {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-left: 4px;
}

/* ---------- Product image ---------- */
#ContentPlaceHolder1_ProdImg,
#ContentPlaceHolder1_ImgJewellery {
    object-fit: cover;
    border-radius: var(--gj-radius);
    border: 1px solid var(--gj-line) !important;
    background: var(--gj-field-ro) !important;
    box-shadow: var(--gj-shadow);
}

.photo-row {
    background: var(--gj-gold-soft) !important;
}

.photo-row td {
    padding: 10px !important;
    text-align: center;
}

/* "Auto-enhance light & brightness" option under the file picker */
.enhance-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.enhance-check input { margin: 0; width: 16px; height: 16px; accent-color: var(--gj-maroon); }
.sales .enhance-check label { margin: 0; font-size: 12px; font-weight: 600; color: var(--gj-maroon); }

/* ---------- Buttons ---------- */
.btn,
.btnghostp {
    display: inline-block;
    height: auto;
    padding: 7px 14px;
    margin: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform .1s, box-shadow .15s, background-color .15s;
    white-space: nowrap;
}

.btn:hover,
.btnghostp:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.btn:active,
.btnghostp:active {
    transform: translateY(0);
}

/* primary action */
.btn-success,
.btn-primary,
.btnghostp,
.btn-success:focus,
.btn-primary:focus {
    color: #ffffff;
    background: var(--gj-maroon);
    border-color: var(--gj-maroon);
}

.btn-success:hover,
.btn-primary:hover,
.btnghostp:hover {
    color: #ffffff;
    background: var(--gj-maroon-dark);
    border-color: var(--gj-maroon-dark);
}

/* secondary action */
.btn-warning,
.btn-warning:focus {
    color: var(--gj-maroon-dark);
    background: var(--gj-gold-light);
    border-color: var(--gj-gold);
}

.btn-warning:hover {
    color: var(--gj-maroon-dark);
    background: var(--gj-gold);
    border-color: var(--gj-gold);
}

/* destructive / back */
.btn-danger,
.btn-danger:focus {
    color: var(--gj-danger);
    background: #ffffff;
    border-color: #e3b8b8;
}

.btn-danger:hover {
    color: #ffffff;
    background: var(--gj-danger);
    border-color: var(--gj-danger);
}

.btn-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ---------- Print preview ---------- */
#ContentPlaceHolder1_TxtPrintView {
    width: 100%;
    background: #fffdf8 !important;
    border: 1px dashed var(--gj-line) !important;
    border-radius: 8px;
    padding: 10px;
    color: var(--gj-ink);
    -webkit-text-fill-color: var(--gj-ink);
    resize: vertical;
}

/* ---------- Grid / report tables ---------- */
.table {
    background: #ffffff;
    border-radius: var(--gj-radius);
    overflow: hidden;
    box-shadow: var(--gj-shadow);
}

.table > thead > tr > th,
.table > tbody > tr > th {
    background: var(--gj-maroon) !important;
    color: var(--gj-gold-light) !important;
    border-color: var(--gj-maroon) !important;
    font-weight: 600;
    letter-spacing: .5px;
}

.table > tbody > tr > td {
    vertical-align: middle;
    border-color: var(--gj-line);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: #fdfaf4 !important;
}

.table-hover > tbody > tr:hover > td {
    background: var(--gj-gold-soft) !important;
}

.table img {
    border-radius: 8px;
    object-fit: cover;
}

/* ---------- Report viewer page ---------- */
.reportform {
    padding: 12px;
}

.reportform > .btn {
    margin-bottom: 10px;
}

/* ---------- Login ---------- */
body.login-page {
    max-width: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: radial-gradient(circle at 30% 20%, #8a1c2e 0%, var(--gj-maroon-dark) 55%, #1e050a 100%) fixed;
}

/* photo panel + form side by side */
.login-shell {
    display: flex;
    width: 100%;
    max-width: 860px;
    min-height: 520px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 162, 74, 0.35);
}

.login-visual {
    flex: 1 1 50%;
    position: relative;
    background: #3b2f2a url('../Images/login_hero.jpg') center 35% / cover no-repeat;
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 5, 10, 0) 45%, rgba(30, 5, 10, 0.85) 100%);
}

.visual-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 24px 26px;
    color: #fff;
}

.visual-caption .tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gj-gold-light);
    border-bottom: 1px solid var(--gj-gold);
    padding-bottom: 4px;
    margin-bottom: 10px;
}

.visual-caption h2 {
    margin: 0 0 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
}

.visual-caption p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.login-shell .login-card {
    flex: 1 1 50%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-top: none;
    border-left: 4px solid var(--gj-gold);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 34px;
}

/* tablet portrait: image narrower */
@media (max-width: 820px) {
    .login-visual { flex-basis: 42%; }
    .visual-caption h2 { font-size: 22px; }
}

/* phones: photo becomes a banner above the form */
@media (max-width: 600px) {
    .login-shell { flex-direction: column; min-height: 0; border-radius: 16px; }
    .login-visual { flex: 0 0 190px; background-position: center 42%; }
    .visual-caption { padding: 14px 18px; }
    .visual-caption .tag { display: none; }
    .visual-caption h2 { font-size: 19px; }
    .visual-caption p { font-size: 12px; }
    .login-shell .login-card { border-left: none; border-top: 4px solid var(--gj-gold); padding: 22px 18px 20px; }
    .login-card .brand { margin-bottom: 14px; }
    .login-card .brand .fa { display: none; }
}

.login-page form {
    width: 100%;
}

.login-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 30px 28px 24px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    border-top: 4px solid var(--gj-gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    color: var(--gj-ink);
}

.login-card .brand {
    text-align: center;
    margin-bottom: 22px;
}

.login-card .brand .fa {
    font-size: 30px;
    color: var(--gj-gold);
}

.login-card .brand h1 {
    margin: 8px 0 2px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--gj-maroon);
    letter-spacing: 1px;
}

.login-card .brand p {
    margin: 0;
    font-size: 12px;
    color: var(--gj-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.login-card label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gj-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.login-card .company-name {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--gj-maroon);
    margin: -6px 0 10px;
}

.login-card .msg {
    display: block;
    text-align: center;
    font-size: 14px;
    color: var(--gj-danger);
    margin-bottom: 8px;
}

.login-card .btn-login {
    width: 100%;
    height: 42px;
    margin: 6px 0 0;
    font-size: 15px;
}

.login-card .validator {
    font-size: 12px;
}

/* "Add to Home Screen" under the login card */
.a2hs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18px auto 0;
    max-width: 860px;
    text-align: center;
}

.a2hs[hidden],
.a2hs-help[hidden] { display: none; }

.a2hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--gj-gold);
    border-radius: 999px;
    background: rgba(30, 5, 10, 0.45);
    color: var(--gj-gold-light);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color .2s, color .2s;
}

.a2hs-btn .fa { font-size: 22px; color: var(--gj-gold); }
.a2hs-btn:hover,
.a2hs-btn:focus-visible { background: var(--gj-gold); color: var(--gj-maroon-dark); outline: none; }
.a2hs-btn:hover .fa,
.a2hs-btn:focus-visible .fa { color: var(--gj-maroon-dark); }

.a2hs-help {
    margin: 0;
    max-width: 320px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gj-gold-light);
}

.a2hs-help b { color: #fff; }

/* the login page stacks the card and the install button */
.login-page form { display: flex; flex-direction: column; align-items: stretch; }

/* ---------- Splash / Index ---------- */
body.splash-page {
    max-width: none;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 35%, #8a1c2e 0%, var(--gj-maroon-dark) 55%, #1e050a 100%);
}

.splash-page a,
.splash-page a:hover {
    text-decoration: none;
    display: block;
}

.splash-page .lbltitle1 {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px !important;
    color: var(--gj-gold);
    letter-spacing: 6px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}

.splash-page .lbltitle2 {
    display: block;
    position: static;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 20px !important;
    color: var(--gj-gold-light);
    letter-spacing: 6px;
    text-transform: uppercase;
}

.splash-page .enter {
    display: inline-block;
    margin-top: 36px;
    padding: 10px 30px;
    border: 1px solid var(--gj-gold);
    border-radius: 999px;
    color: var(--gj-gold-light);
    letter-spacing: 3px;
    font-size: 13px;
    text-transform: uppercase;
    transition: background-color .2s;
}

.splash-page a:hover .enter {
    background: rgba(201, 162, 74, 0.2);
}

@media (max-width: 480px) {
    .splash-page .lbltitle1 { font-size: 48px !important; }
    .splash-page .lbltitle2 { font-size: 14px !important; letter-spacing: 3px; }
}

/* ==========================================================
   Device layouts
   - Tablet : 577px - 1024px
   - Phone  : up to 576px
   - Touch  : any touch-screen device (bigger tap targets)
   ========================================================== */

/* the product-code / button row can wrap instead of overflowing */
.sales tr.action-row td {
    white-space: nowrap;
}

/* ---------- Tablets ---------- */
@media (min-width: 577px) and (max-width: 1024px) {
    body { font-size: 15px; }

    body.app-narrow { max-width: 760px; }

    .page-wrap { padding: 16px; }

    .sales,
    .printview,
    .gj-card { padding: 18px 16px; }

    .txtboxes { width: 110px; }
    .txtboxes1 { width: 260px; }
    .smtxtboxes { width: 60px; }

    .txtboxes, .txtboxes1, .smtxtboxes { height: 36px; font-size: 14px; }

    .sales span { font-size: 14px; }

    #ContentPlaceHolder1_ProdImg { width: 200px !important; height: 260px !important; }

    /* Sales page: form and preview stacked, both full width */
    .app-wide .sales,
    .app-wide .printview { max-width: none; }

    .table img { width: 160px !important; height: 160px !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 576px) {
    body { font-size: 14px; padding-bottom: 20px; }

    body.app-narrow { max-width: none; box-shadow: none; }

    /* header */
    .topnav { min-height: 52px; padding: 0 12px; }
    .topnav a, .topnav a:hover, .topnav a:focus { font-size: 15px; letter-spacing: 1px; }
    .topnav .brand-mark { font-size: 16px; margin-right: 6px; }
    .topnav .signout, .topnav .signout:hover { width: 34px; height: 34px; }

    .page-wrap { padding: 8px; }

    .sales,
    .printview,
    .gj-card {
        padding: 10px 8px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .sales td { padding: 2px; }
    .sales span { font-size: 12px; }

    /* 16px text stops iPhone/Android zooming in when a box is tapped */
    .txtboxes, .txtboxes1, .smtxtboxes, .form-control {
        font-size: 16px;
        height: 36px;
    }

    .txtboxes { width: 84px; padding: 4px 6px; }
    .txtboxes1 { width: 100% !important; min-width: 0; max-width: 230px; }

    /* first row (Date / Time) wraps instead of pushing off-screen */
    #ContentPlaceHolder1_TblSales > tbody > tr:first-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px;
    }

    /* Capture Photo page: every row wraps (it has 4-cell rows of label+box pairs) */
    #ContentPlaceHolder1_TblSales:has(.photo-row) > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
    }
    #ContentPlaceHolder1_TblSales:has(.photo-row) > tbody > tr > td { flex: 1 1 auto; }
    #ContentPlaceHolder1_TblSales:has(.photo-row) .txtboxes { width: 100%; min-width: 70px; }
    #ContentPlaceHolder1_FU { max-width: 100%; }

    /* "Stones Amount" mini-table: remove the desktop side margins */
    #ContentPlaceHolder1_TblStonesAmount { margin-right: 0; }
    #ContentPlaceHolder1_TblStonesAmount span,
    #ContentPlaceHolder1_TxtTotStonesAmt { margin-right: 0 !important; }
    #ContentPlaceHolder1_TblStonesAmount td:empty { display: none; }
    .smtxtboxes { width: 48px; padding: 4px; }
    .txtboxes.editable, .smtxtboxes.editable { min-width: 44px; }

    /* date + time on their own lines */
    #ContentPlaceHolder1_TxtDate { width: 140px !important; }
    #ContentPlaceHolder1_TxtTime { width: 120px !important; }

    /* P.Code + buttons: wrap onto as many lines as needed */
    .sales tr.action-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
    }
    .sales tr.action-row td { padding: 0; }
    /* the cell holding the P.Code box takes the full first line; buttons wrap below */
    .sales tr.action-row td:has(#ContentPlaceHolder1_TxtProdCode) { flex: 1 1 60%; display: flex; align-items: center; gap: 6px; }
    #ContentPlaceHolder1_TxtProdCode { flex: 1; width: 100%; min-width: 0; height: 40px; font-size: 17px; }

    /* product photo smaller so the weights fit beside it */
    #ContentPlaceHolder1_ProdImg { width: 110px !important; height: 150px !important; }
    #ContentPlaceHolder1_ImgJewellery { width: 170px !important; height: 170px !important; }

    /* buttons */
    .btn, .btnghostp { padding: 8px 12px; font-size: 13px; }

    /* totals + final price */
    #ContentPlaceHolder1_TxtTotBAmt { width: 100px; font-size: 16px; }
    .final-price { padding: 8px 14px; }
    .final-price .amount, .sales .final-price .amount { font-size: 18px; }

    /* receipt preview: keep the printed layout, scroll sideways if needed */
    #ContentPlaceHolder1_TxtPrintView {
        font-size: 11px !important;
        white-space: pre;
        overflow-x: auto;
        overflow-wrap: normal;
    }

    /* report page */
    .page-title { font-size: 18px; }
    .table { font-size: 13px; }
    .table img { width: 90px !important; height: 90px !important; }

    /* login */
    body.login-page { padding: 12px; align-items: flex-start; padding-top: 4vh; }
    .login-card { padding: 24px 18px 20px; border-radius: 14px; }
}

/* very small phones (older Android, iPhone SE 1st gen) */
@media (max-width: 360px) {
    .txtboxes { width: 80px; }
    .smtxtboxes { width: 42px; }
    #ContentPlaceHolder1_ProdImg { width: 90px !important; height: 125px !important; }
    .topnav a, .topnav a:hover { font-size: 13px; }
}

/* ---------- Touch screens (phones + tablets) ---------- */
@media (hover: none) and (pointer: coarse) {
    .btn, .btnghostp { min-height: 40px; }
    .btn:hover, .btnghostp:hover { transform: none; }
    .table-hover > tbody > tr:hover > td { background: inherit !important; }
    select.form-control { font-size: 16px; }
}

/* ==========================================================
   Home (Index) hero slider
   ========================================================== */
body.splash-page.has-slider {
    display: block;
    overflow: hidden;
    background: #1e050a;
}

.hero-slider {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #1e050a;
}

.hero-slider .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

.hero-slider .slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 0s;
}

.hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transform: scale(1.12);
    transition: transform 7s ease-out;
}

/* slow "Ken Burns" zoom while a slide is showing */
.hero-slider .slide.is-active img {
    transform: scale(1);
}

/* dark maroon wash so the gold title is always readable */
.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 32% at 50% 48%, rgba(30, 5, 10, 0.62) 0%, rgba(30, 5, 10, 0) 100%),
        linear-gradient(180deg, rgba(30, 5, 10, 0.25) 0%, rgba(30, 5, 10, 0.05) 35%, rgba(30, 5, 10, 0.1) 60%, rgba(30, 5, 10, 0.78) 100%);
}

.slide-caption {
    position: absolute;
    left: 50%;
    bottom: 92px;
    z-index: 2;
    margin: 0;
    transform: translate(-50%, 12px);
    opacity: 0;
    padding: 6px 18px;
    border-top: 1px solid rgba(201, 162, 74, 0.7);
    border-bottom: 1px solid rgba(201, 162, 74, 0.7);
    background: rgba(30, 5, 10, 0.55);
    backdrop-filter: blur(3px);
    color: var(--gj-gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .8s ease .5s, transform .8s ease .5s;
}

.slide.is-active .slide-caption {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* title block sits above the slider */
.splash-page .hero-content,
.splash-page .hero-content:hover {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px 60px;
    text-align: center;
    pointer-events: none; /* only the title + button are clickable; arrows/dots stay usable */
}

.splash-page .hero-content > * { pointer-events: auto; }

/* lighter overlay -> give the title its own soft shadow */
.has-slider .lbltitle1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5); }
.has-slider .lbltitle2 { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.has-slider .enter { background: rgba(30, 5, 10, 0.45); backdrop-filter: blur(3px); }

/* arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 74, 0.6);
    background: rgba(30, 5, 10, 0.35);
    color: var(--gj-gold-light);
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color .2s, transform .2s;
}

.slider-arrow:hover { background: rgba(201, 162, 74, 0.35); transform: scale(1.06); }
.slider-arrow .fa { color: inherit; }
.slider-arrow.prev { left: 24px; }
.slider-arrow.next { right: 24px; }

/* dots */
.slider-dots {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: 4;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--gj-gold);
    background: transparent;
    cursor: pointer;
    transition: width .35s ease, background-color .35s ease;
}

.slider-dots button.is-active {
    width: 30px;
    background: var(--gj-gold);
}

/* thin gold timer line along the bottom */
.slider-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(201, 162, 74, 0.2);
}

.slider-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gj-gold);
}

/* phones */
@media (max-width: 576px) {
    .slider-arrow { display: none !important; } /* swipe instead */
    .slide-caption { bottom: 74px; font-size: 12px; letter-spacing: 3px; }
    .slider-dots { bottom: 32px; }
    .hero-slider .slide img { object-position: center 30%; }
}

/* tablets */
@media (min-width: 577px) and (max-width: 1024px) {
    .slider-arrow { width: 44px; height: 44px; margin-top: -22px; }
    .slider-arrow.prev { left: 14px; }
    .slider-arrow.next { right: 14px; }
}

/* users who turn off animations get a simple fade with no zoom */
@media (prefers-reduced-motion: reduce) {
    .hero-slider .slide img,
    .hero-slider .slide.is-active img { transform: none; transition: none; }
    .hero-slider .slide, .hero-slider .slide.is-active { transition: none; }
    .slide-caption { transition: none; }
}

/* ==========================================================
   Estimation screens (Estimation.aspx / EstimationW.aspx)
   desktop: compact table, equal-size buttons, aligned values
   phones + tablets: stacked app-style layout
   ========================================================== */
.est-form { padding: 10px 10px; }
.est-form td { padding: 2px 4px; }
.est-form .txtboxes,
.est-form .txtboxes1,
.est-form .smtxtboxes { margin: 1px 0; }
.est-form .hl,
.est-form .hl1 { margin: 2px 0; }
.est-form td.final-price-cell { padding-top: 8px; }

/* every estimation button is the same size */
.est-form .btn {
    min-width: 112px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    line-height: 32px;
    text-align: center;
}

/* ---- P.Code, then the action buttons, then Item Name ---- */
.est-form tr.est-action-row > td { padding: 4px; }

.est-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.est-pcode,
.est-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
}

/* P.Code and Item Name labels share a width so their boxes line up */
.est-pcode > span,
.est-item > span { flex: 0 0 72px; }

.est-form #ContentPlaceHolder1_TxtProdCode { margin: 0; width: 160px; }
.est-item .txtboxes1 { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }

.est-actions {
    flex: 1 1 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
}

.est-actions .btn { width: 100%; min-width: 0; }

/* ---- value column: every amount/weight box lines up on the right ---- */
.est-form tr.est-line > td:last-child {
    width: 132px;
    text-align: right;
}

.est-form tr.est-line > td:last-child .txtboxes { width: 120px; }

/* ---- stone details: same right edge as the values above ---- */
.est-form td.est-stones-cell { padding: 0; }

.est-stones {
    width: 100%;
    margin: 2px 0 4px;
    border-top: 1px dashed var(--gj-line);
    border-bottom: 1px dashed var(--gj-line);
}

.est-stones td { padding: 2px 4px; vertical-align: middle; }
.est-stones td:nth-child(2),
.est-stones td:nth-child(3) { width: 112px; text-align: right; white-space: nowrap; }
.est-stones td:nth-child(4) { width: 132px; text-align: right; }

.est-stones td:first-child .txtboxes { width: 100%; }
.est-stones td:nth-child(3) .txtboxes { width: 100%; }
.est-stones td:nth-child(4) .txtboxes { width: 120px; }
.est-stones .lbltxt { display: inline-block; min-width: 26px; text-align: left; }

.est-stones tr.est-stone-head td {
    padding-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--gj-maroon);
}

/* stone slots with no stone in them are not shown */
.est-stones tr:has(> td:first-child input:not([value])),
.est-stones tr:has(> td:first-child input[value=""]) { display: none; }

.est-form.printview .row + .row { margin-top: 6px; }

/* ---- print preview: font size slider + bold toggle ---- */
.est-form .print-font-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px !important;
    padding: 6px 8px !important;
    background: var(--gj-gold-soft) !important;
    border: 1px solid var(--gj-line);
    border-radius: 8px;
}

.print-font-bar .pf-step,
.print-font-bar .pf-bold {
    flex: 0 0 auto;
    height: 32px;
    min-width: 36px;
    padding: 0 10px;
    border: 1px solid var(--gj-gold);
    border-radius: 6px;
    background: #fff;
    color: var(--gj-maroon);
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
}

.print-font-bar .pf-step:hover,
.print-font-bar .pf-bold:hover { background: var(--gj-gold-light); }

.print-font-bar .pf-size {
    flex: 1 1 auto;
    min-width: 60px;
    margin: 0;
    accent-color: var(--gj-maroon);
    cursor: pointer;
}

.sales .print-font-bar .pf-value,
.print-font-bar .pf-value {
    flex: 0 0 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gj-muted);
}

/* pressed = bold on */
.print-font-bar .pf-bold[aria-pressed="true"] {
    background: var(--gj-maroon);
    border-color: var(--gj-maroon);
    color: #fff;
}

.print-font-bar .pf-bold .pf-bold-label { font-weight: 600; }

@media (hover: none) and (pointer: coarse) {
    .print-font-bar .pf-step,
    .print-font-bar .pf-bold { height: 40px; min-width: 44px; line-height: 38px; }
}

/* ==========================================================
   Estimation on phones and tablets (up to 1024px)
   ========================================================== */
@media (max-width: 1024px) {
    .est-form.sales { overflow: visible; padding: 12px 14px 0; }

    .est-form #ContentPlaceHolder1_TblSales,
    .est-form #ContentPlaceHolder1_TblSales > tbody { display: block; width: 100%; }

    .est-form #ContentPlaceHolder1_TblSales > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .est-form #ContentPlaceHolder1_TblSales > tbody > tr > td {
        display: block;
        padding: 0;
    }

    /* the old divider lines are replaced by row borders */
    .est-form tr.est-divider { display: none; }

    /* date + time side by side */
    .est-form tr.est-datetime { gap: 10px; padding-bottom: 10px; }
    .est-form tr.est-datetime > td { flex: 1 1 0; display: flex !important; align-items: center; gap: 6px; min-width: 0; }
    .est-form tr.est-datetime .txtboxes { flex: 1; width: auto !important; min-width: 0; }

    /* section heading */
    .est-form tr.est-head {
        justify-content: space-between;
        padding: 6px 0;
        border-top: 1px solid var(--gj-line);
        border-bottom: 2px solid var(--gj-gold);
    }

    /* P.Code / buttons / Item Name */
    .est-form tr.est-action-row { padding: 10px 0 6px; }
    .est-form tr.est-action-row > td { flex: 1 1 100%; }
    .est-bar { gap: 8px; }
    .est-form #ContentPlaceHolder1_TxtProdCode { flex: 1; width: 100%; min-width: 0; height: 42px; font-size: 18px; }
    .est-form .est-item .txtboxes1 { max-width: none; height: 40px; }
    .est-form .btn { height: 42px; line-height: 40px; font-size: 14px; }

    /* product photo as a centred banner above the figures */
    .est-form td.img-cell {
        flex: 1 1 100%;
        order: -1;
        text-align: center;
        padding: 6px 0 10px !important;
    }
    .est-form #ContentPlaceHolder1_ProdImg {
        width: 100% !important;
        max-width: 340px;
        height: 240px !important;
        object-fit: contain;
        background: #fff !important;
    }

    /* label on the left, value on the right, one figure per line */
    .est-form tr.est-line {
        justify-content: space-between;
        gap: 8px;
        padding: 7px 2px;
        border-bottom: 1px solid var(--gj-line);
    }
    .est-form tr.est-line > td:not(.img-cell):not(:last-child) {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        gap: 6px;
        text-align: left !important;
        min-width: 0;
    }
    .est-form tr.est-line > td:last-child { flex: 0 0 auto; width: auto; }
    .est-form tr.est-line > td:last-child .txtboxes { width: 128px; height: 38px; font-size: 16px; }
    .est-form tr.est-line .txtboxes.editable { width: 60px !important; height: 36px; font-size: 16px; }
    .est-form tr.est-line span { font-size: 14px; }

    /* the bill total stands out */
    .est-form tr.est-line:has(#ContentPlaceHolder1_TxtTotBAmt) { border-bottom: none; padding-top: 10px; }
    .est-form #ContentPlaceHolder1_TxtTotBAmt { width: 140px !important; height: 42px !important; font-size: 18px !important; }

    /* Stones Details button full width */
    .est-form tr.est-toggle { padding: 10px 0 4px; }
    .est-form tr.est-toggle > td { flex: 1 1 100%; }
    .est-form tr.est-toggle .btn { width: 100%; }

    /* stone details: one small card per stone */
    .est-form tr.est-stones-row > td { flex: 1 1 100%; }
    .est-stones, .est-stones > tbody { display: block; border: none; margin: 0; }
    .est-stones tr.est-stone-head { display: none; }
    .est-stones > tbody > tr {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas: "desc desc amt" "wt rate amt";
        align-items: center;
        gap: 2px 8px;
        margin: 6px 0;
        padding: 8px 10px;
        background: var(--gj-gold-soft);
        border: 1px solid var(--gj-line);
        border-radius: 10px;
    }
    .est-stones > tbody > tr > td { display: flex; align-items: center; gap: 4px; padding: 0; width: auto !important; text-align: left; }
    .est-stones td:nth-child(1) { grid-area: desc; }
    .est-stones td:nth-child(2) { grid-area: wt; }
    .est-stones td:nth-child(3) { grid-area: rate; }
    .est-stones td:nth-child(4) { grid-area: amt; justify-content: flex-end; }
    .est-stones td:nth-child(2)::before { content: "Wt"; font-size: 11px; color: var(--gj-muted); }
    .est-stones td:nth-child(3)::before { content: "Rate"; font-size: 11px; color: var(--gj-muted); }

    .est-stones td:first-child .txtboxes {
        padding: 0;
        height: 26px;
        background: transparent;
        font-size: 15px;
        font-weight: 700;
        color: var(--gj-maroon);
        -webkit-text-fill-color: var(--gj-maroon);
    }
    .est-stones td:nth-child(2) .smtxtboxes { width: 64px; height: 32px; }
    .est-stones td:nth-child(3) .txtboxes { width: 90px; height: 32px; }
    .est-stones td:nth-child(4) .txtboxes { width: 110px; height: 38px; font-size: 16px; }

    /* final price sticks to the bottom of the screen like an app footer */
    .est-form tr:has(> td.final-price-cell) {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 8px -14px 0;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(6px);
        border-top: 1px solid var(--gj-line);
        border-radius: 0 0 var(--gj-radius) var(--gj-radius);
        box-shadow: 0 -6px 18px rgba(74, 13, 24, 0.08);
    }
    .est-form td.final-price-cell { flex: 1 1 100%; padding: 0 !important; }
    .est-form .final-price {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
        padding: 10px 18px;
    }
}

/* tablets: wider card, buttons stay four across */
@media (min-width: 577px) and (max-width: 1024px) {
    body.app-narrow:has(.est-form) { max-width: 720px; }
    .est-form #ContentPlaceHolder1_ProdImg { max-width: 420px; height: 300px !important; }
    .est-form tr.est-line { padding: 9px 4px; }
    .est-form tr.est-line span { font-size: 15px; }
    .est-stones > tbody > tr { grid-template-columns: 1fr 1fr 1fr auto; grid-template-areas: "desc wt rate amt"; }
}

/* phones: buttons in an even 2 x 2 grid */
@media (max-width: 576px) {
    .est-form.sales { padding: 10px 10px 0; border-radius: 12px; }
    .est-form tr:has(> td.final-price-cell) { margin: 8px -10px 0; padding: 8px 10px; }
    .est-actions { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
    .est-form .btn { padding: 0 8px; }
    .est-form .final-price { padding: 9px 14px; }
}

/* ==========================================================
   Estimation bottom navigation bar (New / Photo / Print / Preview / Dark)
   ========================================================== */
:root { --ebn-h: 62px; }

.ebn-spacer { height: calc(var(--ebn-h) + 14px); }

.est-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 50;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: calc(var(--ebn-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-top: 2px solid var(--gj-gold);
    box-shadow: 0 -6px 20px rgba(74, 13, 24, 0.12);
}

.est-bottom-nav .ebn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gj-maroon);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.est-bottom-nav .ebn-item .fa { font-size: 20px; color: inherit; }
.est-bottom-nav .ebn-item:hover,
.est-bottom-nav .ebn-item:focus-visible { background: var(--gj-gold-soft); color: var(--gj-maroon-dark); text-decoration: none; outline: none; }
.est-bottom-nav .ebn-item[aria-pressed="true"] { color: var(--gj-gold); }

/* the sticky Final Price bar sits just above the bottom bar */
@media (max-width: 1024px) {
    .est-form tr:has(> td.final-price-cell) { bottom: calc(var(--ebn-h) + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 577px) and (max-width: 1024px) {
    .est-bottom-nav { max-width: 720px; }
}

/* ==========================================================
   Dark mode for Estimation + Capture Photo (html[data-theme="dark"], set by the Dark button)
   ========================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --gj-ivory: #15100e;
    --gj-ink: #f1e9df;
    --gj-muted: #b3a79c;
    --gj-line: #3a302b;
    --gj-field: #241c19;
    --gj-field-ro: #2b231f;
    --gj-gold-soft: #2c2214;
    --gj-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #15100e;
}

html[data-theme="dark"] body { background-image: none; color: var(--gj-ink); }
html[data-theme="dark"] body.app-narrow { box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }

/* cards */
html[data-theme="dark"] .sales,
html[data-theme="dark"] .printview { background: #1c1613; }

/* inputs */
html[data-theme="dark"] .sales .txtboxes,
html[data-theme="dark"] .sales .txtboxes1,
html[data-theme="dark"] .sales .smtxtboxes { border-color: #4a3d35; }
html[data-theme="dark"] .sales .txtboxes.aspNetDisabled,
html[data-theme="dark"] .sales .txtboxes1.aspNetDisabled,
html[data-theme="dark"] .sales .smtxtboxes.aspNetDisabled,
html[data-theme="dark"] .sales [disabled] { border-color: transparent; }
html[data-theme="dark"] .sales .txtboxes.editable,
html[data-theme="dark"] .sales .smtxtboxes.editable,
html[data-theme="dark"] .sales #ContentPlaceHolder1_TxtProdCode { border-color: var(--gj-gold); }

/* maroon text is too dark on a dark page: use gold instead */
html[data-theme="dark"] #ContentPlaceHolder1_LblParticulars,
html[data-theme="dark"] #ContentPlaceHolder1_LblWeight,
html[data-theme="dark"] #ContentPlaceHolder1_LblTotBAmt,
html[data-theme="dark"] .est-stones tr.est-stone-head td { color: var(--gj-gold); }
html[data-theme="dark"] .est-stones td:first-child .txtboxes { color: var(--gj-gold-light); -webkit-text-fill-color: var(--gj-gold-light); }

html[data-theme="dark"] #ContentPlaceHolder1_TxtTotBAmt {
    background: #3a2c14;
    color: var(--gj-gold-light);
    -webkit-text-fill-color: var(--gj-gold-light);
}

/* secondary (gold) buttons stay readable */
html[data-theme="dark"] .sales .btn-warning { background: #3a2c14; color: var(--gj-gold-light); border-color: var(--gj-gold); }
html[data-theme="dark"] .sales .btn-warning:hover { background: var(--gj-gold); color: #1c1613; }

/* final price footer on phones / tablets */
html[data-theme="dark"] .sales tr:has(> td.final-price-cell) { background: rgba(28, 22, 19, 0.96); }

/* print preview + its font bar */
html[data-theme="dark"] #ContentPlaceHolder1_TxtPrintView {
    background: #120e0c !important;
    color: var(--gj-ink);
    -webkit-text-fill-color: var(--gj-ink);
    border-color: var(--gj-line) !important;
}
html[data-theme="dark"] .print-font-bar .pf-step,
html[data-theme="dark"] .print-font-bar .pf-bold { background: #241c19; color: var(--gj-gold-light); }
html[data-theme="dark"] .print-font-bar .pf-step:hover,
html[data-theme="dark"] .print-font-bar .pf-bold:hover { background: #3a2c14; }
html[data-theme="dark"] .print-font-bar .pf-bold[aria-pressed="true"] { background: var(--gj-maroon); color: #fff; }

/* bottom bar */
html[data-theme="dark"] .est-bottom-nav { background: rgba(28, 22, 19, 0.97); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .est-bottom-nav .ebn-item { color: var(--gj-gold-light); }
html[data-theme="dark"] .est-bottom-nav .ebn-item:hover,
html[data-theme="dark"] .est-bottom-nav .ebn-item:focus-visible { color: #fff; }
html[data-theme="dark"] .est-bottom-nav .ebn-item[aria-pressed="true"] { color: var(--gj-gold); }

/* Capture Photo screen */
html[data-theme="dark"] #ContentPlaceHolder1_FU { color: var(--gj-ink); }
html[data-theme="dark"] .sales .enhance-check label { color: var(--gj-gold-light); }
html[data-theme="dark"] .sales .btn-danger { background: #241c19; color: #f0a0a0; border-color: #7a3a3a; }
html[data-theme="dark"] .sales .btn-danger:hover { background: var(--gj-danger); color: #fff; border-color: var(--gj-danger); }
html[data-theme="dark"] #ContentPlaceHolder1_ImgJewellery { border-color: var(--gj-line) !important; }

/* ==========================================================
   Home (Index) slider: centred frame with a 10% border
   ========================================================== */
body.splash-page.has-slider {
    background: radial-gradient(circle at 50% 35%, #8a1c2e 0%, var(--gj-maroon-dark) 55%, #1e050a 100%) fixed;
}

.hero-slider {
    inset: 10%;
    border: 1px solid rgba(201, 162, 74, 0.6);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(201, 162, 74, 0.12);
}

.hero-slider .slide img { border-radius: inherit; }