/* ==========================================================================
   Yaalini_CustomerAccount :: account-theme.css
   Same maroon/gold brand system as the order-success page. Scoped to
   `body.account` (the class Magento's own customer_account.xml layout adds
   to every My Account page) so nothing here leaks onto catalog/cart pages.
   ========================================================================== */

body.account {
    --yca-maroon: #7a1728;
    --yca-maroon-dark: #5c1120;
    --yca-gold: #c79a45;
    --yca-gold-light: #e9d9b3;
    --yca-ink: #2c2320;
    --yca-muted: #7a7068;
    --yca-border: #ece3d6;
    --yca-bg-soft: #fbf7f1;
    --yca-radius: 12px;
    --yca-shadow: 0 6px 20px rgba(122, 23, 40, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---------------------------------------------------------------------- */
/* Custom templates: dashboard / orders / address book                    */
/* ---------------------------------------------------------------------- */

.yca-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.yca-hero {
    margin-bottom: 22px;
}

.yca-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--yca-maroon-dark);
    margin: 0;
}

.yca-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.yca-card {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-top: 3px solid var(--yca-gold);
    border-radius: var(--yca-radius);
    box-shadow: var(--yca-shadow);
    padding: 18px 20px;
}

.yca-card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yca-maroon);
    margin: 0 0 10px;
}

.yca-card-body {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--yca-ink);
}

.yca-section {
    margin-bottom: 28px;
}

.yca-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.yca-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--yca-maroon-dark);
    margin: 0;
}

.yca-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.yca-card--address address {
    font-style: normal;
    display: block;
    margin-bottom: 14px;
}

/* A fixed, consistent gap above the Edit link — the previous
   margin-top:auto "pin to bottom" approach created an uneven look (a
   large, variable gap above the button vs. a small fixed one below it,
   from the card's own bottom padding). Letting each card size to its own
   content and giving the button a normal margin instead keeps the gap
   the same on both sides. */
.yca-card--address .yca-card-body > a {
    margin-top: 4px;
}

/* Belt-and-braces colour fix for the address-card Edit link: attribute
   substring match + !important so it can't lose to the theme regardless
   of whether this is rendering from our template's .yca-btn classes or,
   if that block name ever changes upstream, a default Magento template's
   own "edit" link. */
body.account .column.main a[class*="edit"] {
    background: #fff !important;
    color: var(--yca-maroon) !important;
    border: 1.5px solid var(--yca-maroon) !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    box-shadow: none !important;
}

body.account .column.main a[class*="edit"]:hover {
    background: var(--yca-bg-soft) !important;
}

.yca-muted {
    color: var(--yca-muted);
    font-size: 13.5px;
}

.yca-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    box-shadow: none !important;
    transition: transform 0.15s ease, background 0.15s ease;
}

.yca-btn--outline {
    background: #fff !important;
    color: var(--yca-maroon) !important;
    border: 1.5px solid var(--yca-maroon) !important;
    padding: 10px 20px !important;
    font-size: 13px;
}

.yca-btn--outline:hover {
    background: var(--yca-bg-soft) !important;
    transform: translateY(-1px);
}

.yca-btn--primary {
    background: linear-gradient(135deg, var(--yca-maroon) 0%, var(--yca-maroon-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 13px;
}

.yca-btn--primary:hover {
    transform: translateY(-1px);
}

.yca-btn--sm {
    padding: 7px 16px !important;
    font-size: 12.5px;
}

.yca-orders-wrap,
.yca-orders-card {
    padding: 0;
}

.yca-table-scroll {
    overflow-x: auto;
}

.yca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.yca-table thead th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yca-muted);
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 2px solid var(--yca-border);
    white-space: nowrap;
}

.yca-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--yca-border);
    vertical-align: middle;
}

.yca-table tbody tr:last-child td {
    border-bottom: none;
}

.yca-table tbody tr:hover {
    background: var(--yca-bg-soft);
}

.yca-num {
    text-align: right;
    white-space: nowrap;
}

.yca-status {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.yca-status--info    { background: #eaf1fb; color: #2b5fa8; }
.yca-status--success { background: #e8f6ee; color: #1e8a4c; }
.yca-status--warning { background: #fdf1de; color: #b3771b; }
.yca-status--danger  { background: #fbe9ea; color: #b3372f; }
.yca-status--muted   { background: #efece9; color: #6b6259; }

.yca-actions-cell {
    white-space: nowrap;
}

.yca-link {
    color: var(--yca-maroon);
    font-weight: 600;
    text-decoration: none;
    margin-right: 14px;
    font-size: 13px;
}

.yca-link:hover {
    text-decoration: underline;
}

.yca-empty {
    background: var(--yca-bg-soft);
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    padding: 20px;
    color: var(--yca-muted);
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------- */
/* Generic reskin for pages we did NOT override (Magento's own default    */
/* markup): account navigation sidebar, dashboard's info/address child    */
/* blocks, the Account Information edit form, recent-orders widget, and   */
/* a best-effort pass at the My Support Tickets page.                     */
/* ---------------------------------------------------------------------- */

/* The page title (e.g. "My Account") sits on the site's own dark maroon
   banner, which already renders it in white by default elsewhere (e.g.
   the My Support Tickets page). An earlier version of this file set it to
   dark maroon here, which made it nearly invisible against the same-color
   banner — removed rather than "fixed" to a hardcoded white, so it just
   inherits whatever the theme already does correctly on every other page. */

/* Account navigation sidebar. The card "box" is on the outer wrapper
   (.account-nav / .block-collapsible-nav) rather than the inner
   ul.nav.items list, and li/a selectors aren't restricted to the exact
   "nav item" class — some modules (e.g. the Help Desk ticket link) render
   their nav entry with different markup that still lives inside this same
   wrapper, and a narrower selector was leaving it outside the styled box
   with plain default bullet styling. */
body.account .account-nav,
body.account .block-collapsible-nav {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    box-shadow: var(--yca-shadow);
    padding: 6px;
    overflow: hidden;
}

body.account .block-collapsible-nav .title strong,
body.account .account-nav .title strong {
    color: var(--yca-maroon-dark);
    font-size: 15px;
}

body.account .account-nav ul,
body.account .block-collapsible-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.account .account-nav li,
body.account .block-collapsible-nav li {
    margin: 2px 0;
}

body.account .account-nav li > a,
body.account .account-nav li > strong,
body.account .block-collapsible-nav li > a,
body.account .block-collapsible-nav li > strong {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--yca-ink);
    text-decoration: none;
    font-weight: 500;
}

body.account .account-nav li > a:hover,
body.account .block-collapsible-nav li > a:hover {
    background: var(--yca-bg-soft);
    color: var(--yca-maroon);
}

body.account .account-nav li.current > a,
body.account .account-nav li.current > strong,
body.account .block-collapsible-nav li.current > a,
body.account .block-collapsible-nav li.current > strong {
    background: var(--yca-maroon);
    color: #fff;
    font-weight: 700;
}

/* Our own Account Navigation wrapper template (account/navigation.phtml).
   On desktop this renders as a plain toggle button sitting above an
   always-visible list (button hidden via the media query below); the
   collapse-to-a-single-row behavior is mobile-only. */
body.account .yca-nav {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    box-shadow: var(--yca-shadow);
    padding: 6px;
    overflow: hidden;
    margin: 0 0 12px;
}

/* The gap above the nav on mobile comes from whatever structural spacing
   the theme puts above .column.main — our relocated nav sits in that
   spacing now since it's the new first thing there. Pulling it up
   directly (rather than changing where it's inserted, which caused a
   worse regression) is the lower-risk fix. */
@media (max-width: 768px) {
    body.account .yca-nav {
        margin-top: -40px;
    }
}

body.account .yca-nav-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: var(--yca-maroon-dark);
    text-align: left;
}

body.account .yca-nav-chevron {
    width: 18px;
    height: 18px;
    stroke: var(--yca-maroon);
    stroke-width: 2;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

body.account .yca-nav-open .yca-nav-chevron {
    transform: rotate(180deg);
}

body.account .yca-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.account .yca-nav-list li {
    margin: 2px 0;
}

body.account .yca-nav-list li > a,
body.account .yca-nav-list li > strong {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--yca-ink);
    text-decoration: none;
    font-weight: 500;
}

body.account .yca-nav-list li > a:hover {
    background: var(--yca-bg-soft);
    color: var(--yca-maroon);
}

body.account .yca-nav-list li.current > a,
body.account .yca-nav-list li.current > strong {
    background: var(--yca-maroon);
    color: #fff;
    font-weight: 700;
}

/* Collapsed by default on mobile: the whole list is hidden and only the
   toggle button (current page name + chevron) shows. Tapping it adds
   .yca-nav-open, which reveals the full list — no separate current-item
   pill outside the list, that was the source of the earlier duplicate/
   overflow look. Desktop is untouched: toggle stays hidden, list always
   shows, same as before this feature existed. */
@media (max-width: 768px) {
    body.account .yca-nav-toggle {
        display: flex;
    }
    body.account .yca-nav-list {
        display: none;
    }
    body.account .yca-nav-open .yca-nav-list {
        display: block;
        margin-top: 4px;
    }
}

/* Dashboard's default "info" / "address" child blocks (unmodified core
   templates) and the standalone Address Book page's .box markup */
body.account .block-dashboard-info .box,
body.account .block-dashboard-addresses .box,
body.account .box {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    padding: 16px 18px;
    margin-bottom: 14px;
}

body.account .box-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yca-maroon);
    margin-bottom: 8px;
}

/* Any core/theme "action" button inside the dashboard/address area —
   substring match on class so we don't depend on guessing the exact
   class list, and !important because the theme's own button styling
   (the peach/tan pill) is otherwise winning on specificity. */
body.account .block-dashboard-info a[class*="action"],
body.account .block-dashboard-addresses a[class*="action"],
body.account .yca-address-grid a[class*="action"],
body.account .yca-card a[class*="action"] {
    background: #fff !important;
    color: var(--yca-maroon) !important;
    border: 1.5px solid var(--yca-maroon) !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    box-shadow: none !important;
}

body.account .block-dashboard-info a[class*="action"]:hover,
body.account .block-dashboard-addresses a[class*="action"]:hover,
body.account .yca-address-grid a[class*="action"]:hover,
body.account .yca-card a[class*="action"]:hover {
    background: var(--yca-bg-soft) !important;
}

/* Magento's own address widget renders a "Manage Addresses" link as a
   sibling after the billing/shipping boxes — inside our CSS grid that
   becomes a stray, oddly-sized third cell. Give it its own full-width
   row with proper spacing instead. */
body.account .yca-address-grid > a {
    grid-column: 1 / -1;
    margin-top: 4px;
    margin-bottom: 22px;
    width: fit-content;
}

/* Recent orders widget on the dashboard (default core template) */
body.account .block-dashboard-orders table.data.table,
body.account table.table-order-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    overflow: hidden;
}

body.account .block-dashboard-orders table.data.table th,
body.account table.table-order-items th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yca-muted);
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 2px solid var(--yca-border);
}

body.account .block-dashboard-orders table.data.table td,
body.account table.table-order-items td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--yca-border);
}

/* "View Order | Reorder" action links in the Recent Orders widget were
   plain, barely-distinguishable text. Colour them and give them some
   breathing room instead. */
body.account .block-dashboard-orders td.actions a,
body.account .block-dashboard-orders .col.actions a,
body.account table.table-order-items td.actions a,
body.account table.table-order-items a.action {
    color: var(--yca-maroon) !important;
    font-weight: 600;
    text-decoration: none;
    margin-right: 8px;
}

body.account .block-dashboard-orders td.actions a:hover,
body.account table.table-order-items td.actions a:hover {
    text-decoration: underline;
}

/* Recently Ordered sidebar widget's "Add to Cart" — scoped specifically
   to that widget (not the whole account area) so it doesn't repeat the
   earlier bleed problem into other pages, but still actually catches it
   here since a broader .column.main rule can't reach the sidebar. */
body.account .block.block-reorder .action.primary,
body.account .block.block-reorder .action.tocart,
body.account .sidebar .action.tocart {
    background: linear-gradient(135deg, var(--yca-maroon) 0%, var(--yca-maroon-dark) 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Account Information edit form */
body.account .fieldset {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    padding: 20px 20px 6px;
    box-shadow: var(--yca-shadow);
}

body.account .fieldset .legend,
body.account fieldset > legend {
    font-size: 15px;
    font-weight: 700;
    color: var(--yca-maroon-dark);
}

body.account .field .label,
body.account .field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--yca-ink);
}

body.account .control input.input-text,
body.account .control input[type="text"],
body.account .control input[type="email"],
body.account .control input[type="password"],
body.account .control input[type="tel"],
body.account .control select,
body.account .control textarea {
    border: 1px solid var(--yca-border);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13.5px;
}

body.account .control textarea {
    border-radius: 10px;
}

body.account .control input.input-text:focus,
body.account .control select:focus,
body.account .control textarea:focus {
    border-color: var(--yca-maroon);
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 23, 40, 0.1);
}

/* Primary ("Save" / "Submit" / "Add New Address" etc.) buttons across the
   account area's main content — scoped to .column.main specifically so it
   catches every form/page toolbar there (Address Book, Newsletter
   Subscriptions, GDPR, Account Information) without also touching the
   sidebar's Recently Ordered widget, which lives in .sidebar, not
   .column.main, and whose "Add to Cart" button we want left alone.
   Also covers .btn.btn-primary specifically: the Add/Edit Address page
   uses a customized theme template (confirmed from
   Mgs/Claue/Magento_Customer/templates/address/edit.phtml) with
   Bootstrap-style class names ("action save btn btn-primary") instead of
   Magento's usual "action primary" — that's why its Save Address button
   was still black even after the rule below existed.
   .block-new-customer covers the Login page's "Create an Account" CTA
   specifically — that panel isn't inside .column.main at all (it's a
   sibling block alongside the login form). Still not matching after
   v1.2.7/v1.2.8 with a plain .action.primary selector — Magento's
   actions-toolbar pattern often puts "primary" on a *wrapping* div
   rather than the link itself (e.g. <div class="primary"><a
   class="action create">), so a broader "any .action link inside this
   specific, single-purpose panel" selector is used instead of requiring
   both classes on one element. */
body.account .column.main .action.primary,
body.account .column.main button.action.primary,
body.account .column.main .primary button,
body.account .column.main button.primary,
body.account .column.main .btn.btn-primary,
body.account .column.main [class*="btn-primary"],
body.account .block-new-customer .action.primary,
body.account .block-new-customer a.action,
body.account .block-new-customer .primary a {
    background: linear-gradient(135deg, var(--yca-maroon) 0%, var(--yca-maroon-dark) 100%) !important;
    border: 1.5px solid transparent !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
    flex-shrink: 0 !important;
    display: inline-block;
}

body.account .column.main .actions-toolbar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap !important;
    margin-top: 18px;
}

/* "Back" / secondary links wherever they appear in the account area —
   needs the full pill treatment (background + border), not just a text
   colour change, to actually beat the theme's default peach/tan fill.
   Same padding/border-width/box-sizing as the primary button above so
   the two sit at identical height side by side — "Save" is usually a
   native <button> and "Go back" an <a>, and those carry different
   default browser chrome unless explicitly reset to match. */
body.account a.action.back,
body.account .action.back,
body.account .actions-toolbar .secondary a.action {
    background: #fff !important;
    color: var(--yca-maroon) !important;
    border: 1.5px solid var(--yca-maroon) !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    white-space: nowrap;
    box-shadow: none !important;
    margin: 0 !important;
    vertical-align: middle;
}

body.account a.action.back:hover,
body.account .action.back:hover,
body.account .actions-toolbar .secondary a.action:hover {
    background: var(--yca-bg-soft) !important;
}

/* Generic buttons/links elsewhere in the account area */
body.account .action.change-password,
body.account a.action.edit {
    border: 1.5px solid var(--yca-maroon);
    color: var(--yca-maroon);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

body.account .action.change-password:hover,
body.account a.action.edit:hover {
    background: var(--yca-bg-soft);
}

/* My Support Tickets (Yaalini_HelpDesk module) — confirmed from the
   module's actual rendered HTML: table.data.table.table-order-items.helpdesk-tickets
   with a data-th attribute on every <td>. Desktop styling is already
   covered by the generic .table rules using that same "data table"
   convention; the mobile card-stacking treatment below is what was
   actually missing (the table had no responsive collapse at all, so a
   7-column table just rendered squeezed on a phone screen, which is what
   caused the character-by-character wrapping).

   NOTE: badge shape/colour styling used to be forced here with
   `border-radius: 999px !important`, which is what turned HelpDesk's own
   nicer rounded-rectangle badges into full pills — that's now fixed
   directly in Yaalini_HelpDesk's own templates instead, so this module
   no longer touches badge appearance at all. */
body.account .btn-danger,
body.account a.btn.btn-danger {
    background-color: var(--yca-maroon) !important;
    border-color: var(--yca-maroon) !important;
}

body.account .table,
body.account table.helpdesk-tickets {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

body.account .table thead th,
body.account table.helpdesk-tickets thead th {
    color: var(--yca-muted);
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    border-bottom: 2px solid var(--yca-border) !important;
    padding: 12px 16px !important;
    white-space: nowrap;
}

body.account .table td,
body.account table.helpdesk-tickets td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Ticket number only needs to stay on one line on mobile, where it's
   the card's own title line. On desktop there's ample width for it to
   wrap naturally if it ever needed to — forcing nowrap there was
   squeezing the Subject and Action columns down far enough to trigger
   the same site-wide aggressive word-break on their own short words
   ("View" splitting into "Vie" / "w"). */
@media (max-width: 639px) {
    body.account .table td:first-child,
    body.account table.helpdesk-tickets td:first-child {
        white-space: nowrap;
    }
}

.yca-ticket-cards {
    display: block;
}

.yca-ticket-card {
    background: #fff;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.yca-tc-top,
.yca-tc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.yca-tc-row {
    margin-top: 8px;
}

.yca-tc-id {
    font-weight: 700;
    font-size: 15px;
    color: var(--yca-maroon);
    min-width: 0;
}

.yca-tc-id a {
    color: inherit;
    text-decoration: none;
}

.yca-tc-subject {
    font-size: 13.5px;
    color: var(--yca-ink);
    margin-top: 6px;
}

.yca-tc-muted {
    font-size: 12.5px;
    color: var(--yca-muted);
    min-width: 0;
}

.yca-tc-badge {
    flex: 0 0 auto;
}

.yca-tc-action {
    flex: 0 0 auto;
}

.yca-tc-action a,
.yca-ticket-card .yca-tc-action a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--yca-maroon) 0%, var(--yca-maroon-dark) 100%) !important;
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.yca-tc-action a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(122, 23, 40, 0.28);
}

.yca-ticket-card {
    transition: box-shadow 0.15s ease;
}

.yca-ticket-card:hover {
    box-shadow: var(--yca-shadow), 0 4px 16px rgba(122, 23, 40, 0.08);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 639px) {
    .yca-card-grid,
    .yca-address-grid {
        grid-template-columns: 1fr;
    }
    .yca-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .yca-table thead {
        display: none;
    }
    .yca-table,
    .yca-table tbody,
    .yca-table tr,
    .yca-table td {
        display: block;
        width: 100%;
    }
    .yca-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--yca-border);
    }
    .yca-table td {
        border-bottom: none;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    .yca-orders-card {
        padding: 10px !important;
    }
    .yca-table td::before {
        content: attr(data-th);
        font-weight: 600;
        color: var(--yca-muted);
        font-size: 11.5px;
        text-transform: uppercase;
    }

    /* Recent Orders widget on the dashboard (untouched core template) —
       at mobile widths it was falling back to a plain stacked
       Label: Value list with no visual separation between orders. Wrap
       each order row as its own card, consistent with the rest of the
       account area's mobile styling. */
    body.account .block-dashboard-orders table.data.table thead,
    body.account table.table-order-items thead {
        display: none;
    }
    body.account .block-dashboard-orders table.data.table,
    body.account .block-dashboard-orders table.data.table tbody,
    body.account .block-dashboard-orders table.data.table tr,
    body.account .block-dashboard-orders table.data.table td,
    body.account table.table-order-items,
    body.account table.table-order-items tbody,
    body.account table.table-order-items tr,
    body.account table.table-order-items td {
        display: block;
        width: 100%;
        border: none;
    }
    body.account .block-dashboard-orders table.data.table tr,
    body.account table.table-order-items tr {
        background: #fff;
        border: 1px solid var(--yca-border) !important;
        border-radius: var(--yca-radius);
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    body.account .block-dashboard-orders table.data.table td,
    body.account table.table-order-items td {
        padding: 4px 0 !important;
    }
    body.account .block-dashboard-orders {
        margin-bottom: 20px;
    }
}


/* ---------------------------------------------------------------------- */
/* Ticket detail page (Yaalini_HelpDesk ticket/view.phtml) — class names  */
/* confirmed directly from that template's actual source.                 */
/* ---------------------------------------------------------------------- */

body.account .helpdesk-ticket-view {
    max-width: 760px;
}

/* Ticket meta row (Ticket #, status/priority badges, department, order#)
   — turn the plain inline text row into a proper card header. */
body.account .helpdesk-ticket-view .ticket-meta {
    background: #fff !important;
    border: 1px solid var(--yca-border);
    border-radius: var(--yca-radius);
    box-shadow: var(--yca-shadow);
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    color: var(--yca-ink) !important;
}

body.account .helpdesk-ticket-view .ticket-meta strong {
    color: var(--yca-maroon);
    font-size: 15px;
}

body.account .helpdesk-ticket-view .ticket-meta span[style*="color:#999"] {
    color: var(--yca-muted) !important;
}

/* Subject */
body.account .helpdesk-ticket-view h2 {
    color: var(--yca-maroon-dark);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
}

/* "This ticket is closed..." notice */
body.account .helpdesk-ticket-view .message.info.empty {
    background: #fdf1de;
    border: 1px solid #f0dcb0;
    border-radius: var(--yca-radius);
    padding: 12px 16px;
    color: #8a5a12;
    font-size: 13px;
    margin-bottom: 18px;
}

/* Message thread */
body.account .helpdesk-message {
    border-radius: var(--yca-radius) !important;
    padding: 16px 18px !important;
    box-shadow: var(--yca-shadow);
}

body.account .helpdesk-message--customer {
    background: var(--yca-bg-soft) !important;
    border: 1px solid var(--yca-border) !important;
    border-left: 4px solid var(--yca-gold) !important;
}

body.account .helpdesk-message--admin {
    background: #fff !important;
    border: 1px solid var(--yca-border) !important;
    border-left: 4px solid var(--yca-maroon) !important;
}

body.account .helpdesk-message-author {
    color: var(--yca-ink);
    font-size: 14px;
    font-weight: 700;
}

body.account .helpdesk-message-tag {
    color: var(--yca-maroon) !important;
    font-weight: 600;
    font-size: 12px;
}

body.account .helpdesk-message-time {
    color: var(--yca-muted) !important;
    font-size: 11.5px !important;
    margin: 2px 0 10px !important;
}

body.account .helpdesk-message-body {
    color: var(--yca-ink);
    line-height: 1.65;
    font-size: 13.5px;
}

body.account .helpdesk-attachment-link {
    background: var(--yca-bg-soft) !important;
    color: var(--yca-maroon) !important;
    border: 1px solid var(--yca-border);
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
}

/* Reply form */
body.account .helpdesk-ticket-view .field {
    margin-bottom: 18px;
}

body.account .helpdesk-ticket-view .field .label span {
    font-weight: 600;
    color: var(--yca-ink);
    font-size: 13px;
}

body.account .helpdesk-ticket-view textarea.input-text {
    width: 100%;
    border: 1px solid var(--yca-border) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
}

body.account .helpdesk-ticket-view textarea.input-text:focus {
    border-color: var(--yca-maroon) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 23, 40, 0.1);
}

body.account .helpdesk-ticket-view input[type="file"] {
    font-size: 12.5px;
    margin-top: 4px;
}

body.account .helpdesk-field-note {
    color: var(--yca-muted) !important;
    font-size: 11.5px !important;
}

@media (max-width: 639px) {
    body.account .helpdesk-ticket-view .ticket-meta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* Forgot Password page — its form has no max-width of its own (unlike
   Login/Create Account, which sit naturally constrained in a 2-column
   layout), so the email field and button row were stretching edge to
   edge across the full page width. Magento core class name
   (.form.password.forget), confirmed against real markup this time
   (`class="form password forget"`, id="form-validate",
   action=".../forgotpasswordpost/").

   v1.3.7: this 560px cap never actually took effect — DevTools showed
   the form rendering at 1319px wide despite this rule matching in the
   Styles panel. Root cause: no !important here, and Magento's own core
   form-width rule (module.less:1057, visible in the same DevTools
   panel) — `.form.password.forget { width: 100%; min-width: 100%; }`
   at min-width:768px — was winning purely on that basis: a plain
   !important beats any non-!important rule regardless of selector
   specificity, and our rule (though more specific) had none. Fixed by
   adding !important.

   v1.3.8: still didn't fully work — max-width WAS winning by then
   (confirmed via Computed tab), but the form still rendered at
   1319px. Computed tab showed why: max-width: 560px, but min-width:
   100% (≈1319px) from that same core rule, which we'd added
   !important to max-width/width for but never touched min-width on.
   Per the CSS spec this isn't a specificity fight at all — the used
   width is computed as max(min-width, min(width, max-width)), so a
   min-width of 1319px overrides a max-width of 560px unconditionally,
   regardless of !important or selector weight on either property.
   Added min-width: 0 !important here to remove that floor. Also worth
   noting from the same real markup: the Back/submit buttons on this
   page sit inside a DIFFERENT wrapper class, ".actions-toolbar-form"
   — not ".actions-toolbar" like every other account page — so none of
   this file's existing ".actions-toolbar ..." button rules ever match
   here at all; these buttons are only styled by the general site-wide
   ".btn.btn-primary"/".action.back" rules further up this file. Fine
   today since nothing here is clipping, but if this page's buttons
   ever need page-specific tweaks, target ".actions-toolbar-form", not
   ".actions-toolbar". */
body.account .form.password.forget.password.forget {
    max-width: 700px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* v1.3.9: centered per request, and widened 560px -> 700px for a bit
   more breathing room now that it's no longer full-width. The
   .actions-toolbar-form row (Back/Reset buttons) and .fieldset both
   inherit this width automatically since they're normal block
   descendants of .form.password.forget — no separate rule needed for
   them. */

/* v1.4.0: box looked horizontally stretched with too little vertical
   room — the site-wide card style (body.account .fieldset, ~line 580)
   uses a deliberately small "padding: 20px 20px 6px" (asymmetric,
   near-zero at the bottom), shared across every account fieldset
   (Account Information edit form, etc.), so it's not touched globally.
   Overridden just for this page's fieldset instead, for more breathing
   room above the label and below the reCAPTCHA. */
body.account .form.password.forget .fieldset {
    padding: 32px 24px 28px !important;
}
/* Create Account page — "Create an Account" button clipped on desktop
   only (confirmed fine on mobile). v1.3.2 was still wrong: it targeted
   ".action.primary", but the REAL rendered markup (finally provided) is

     <div class="actions-toolbar">
       <div class="line">
         <div class="col-des-6 col-tb-6 col-mb-12">
           <a class="action btn btn-default btn-full back">...
         <div class="col-des-6 col-tb-6 col-mb-12">
           <button class="action submit btn btn-primary btn-full">...

   Two real findings from this markup, not guesses:
   1) The submit button has no ".primary" class at all — it's
      ".btn.btn-primary" (Bootstrap-style naming, same pattern already
      seen on the Address Book page per this file's other notes). Every
      previous fix here (".action.primary", flex-shrink) targeted a
      class that was never on this element, so none of it ever applied.
   2) "col-des-6" / "col-tb-6" / "col-mb-12" is a 12-column grid: each
      button gets a 50%-width column on desktop/tablet, but a full-width
      (12/12) column on mobile — which is exactly why this only breaks
      on desktop. Grid/float column systems conventionally put
      "overflow: hidden" on the ".line" row to clear floats, which
      clips an oversized child instead of showing a scrollbar — matches
      what's been observed throughout this bug.
   Fix: target the real ".btn.btn-primary" classes (doubled to beat the
   shared rule's tied specificity — same logic as the .action.primary
   attempt above), shrink padding/font enough to comfortably fit a
   half-width column, and keep white-space: normal as a fallback so if
   the column is ever narrower than this, it wraps instead of clipping.
   Scoped to this page only.

   v1.3.4: clipping was fixed, but this rule's own "width: 100%"
   stretched the button to match its (much narrower) "Back" column,
   leaving no room for the text on one line — so it wrapped to two
   lines instead. Screenshot confirmed plenty of open space to the
   right, i.e. the column itself was never actually the constraint at
   normal content width. Switched to "width: auto" so the button sizes
   to its own content instead of filling the column, and back to
   "white-space: nowrap" now that the real clipping cause (wrong class
   name, fixed in v1.3.3) is gone — "max-width: 100%" stays on as a
   safety net in case the column is ever genuinely narrower than the
   button's content width, in which case this alone would clip again;
   if that happens, "white-space: normal" is the fallback to restore
   here, not a width/padding change.

   v1.3.5: that fallback was needed — nowrap + width:auto clipped
   again, meaning .actions-toolbar's available width is genuinely
   narrower than "Create an Account" needs at readable size, which the
   50/50 column split alone doesn't explain (screenshot shows real
   unused page space well to the right of the clipped button, out to
   where Confirm Password / the legal-text checkbox row both reach).
   Something above .actions-toolbar — not yet seen in any markup
   provided so far — is capping its width narrower than the rest of
   the form. Reverted to a known-safe wrap-not-clip state and asked for
   DevTools computed styles rather than guess a fourth selector.

   v1.3.6 found and fixed the real ancestor — see the rule and comment
   further down this file for the actual cause and fix. The final,
   current button rule for this page is the one at the bottom of this
   file; nothing here is applied any more. */

/* Belt-and-braces: if ".line" (or whatever wraps the two columns) uses
   overflow: hidden to clear its floated/grid columns, as grid systems
   typically do, that alone is enough to clip an oversized child
   regardless of the button's own sizing. Loosening it here only on
   this page/row is safe — it can't reintroduce the layout bug the
   overflow was originally there to prevent, since col-des-6/col-tb-6/
   col-mb-12 are percentage-based columns, not floats needing
   containment. */
body.customer-account-create .actions-toolbar .line {
    overflow: visible !important;
}

/* v1.3.6 — the real ancestor asked about in v1.3.5, found via DevTools
   Computed tab + full DOM tree: the button's computed width (100% of
   its own column) resolved to only 118.767px actual pixels, meaning
   its parent ".col-des-6" (flex-basis/max-width: 50% per the theme's
   own grid CSS in claue_styles.css) was itself only ~237px wide —
   nowhere near the row width visible elsewhere on the page (Confirm
   Password, the legal-text checkbox row). DevTools also showed BOTH
   ".actions-toolbar" and ".line" tagged as flex containers — nested
   flex, which is the actual bug.

   ".line" is the theme's own Bootstrap-style grid row (itself
   display:flex, holding the two 50%-basis .col-des-6 columns) — built
   to be a normal BLOCK child of .actions-toolbar. But the site-wide
   rule below (search "body.account .column.main .actions-toolbar" a
   few hundred lines up in this file — added early in this module for
   the dashboard/orders/address-book action rows) forces
   ".actions-toolbar" itself to "display: flex !important". That also
   applies here, since this page carries body.account + .column.main
   too. Turning .actions-toolbar into a flex container makes ".line" a
   flex ITEM instead of a block child — with no flex-grow set, a flex
   item's width collapses to shrink-wrap its own content's minimum
   instead of stretching to fill its parent, which is exactly the
   ~237px collapse measured above. This is OUR OWN earlier CSS causing
   it, not the theme — the "something above .actions-toolbar not yet
   seen in any markup" from v1.3.5 was this rule, not new markup.

   Fix: revert .actions-toolbar back to block on this page only, so
   .line (already its own flex row per the theme) regains its true
   full block width and the 50% columns become 50% of the FULL row —
   comfortably wide enough for "Create an Account" on one line at
   normal button sizing. Specificity note: the site-wide rule is
   (0,4,1) with !important, so this override needs to beat that — done
   two ways at once (assuming .column.main is a real ancestor here per
   Magento's standard page structure, AND a specificity-only fallback
   that wins regardless of whether that assumption holds), so this
   doesn't depend on a guess about exact DOM nesting the way earlier
   attempts did. */
body.customer-account-create .column.main .actions-toolbar,
body.customer-account-create .actions-toolbar.actions-toolbar.actions-toolbar.actions-toolbar {
    display: block !important;
}

/* Now that .line has its real width back, the button can return to
   the site's normal single-line button sizing — no more forced wrap,
   no more artificial shrinking. */
body.customer-account-create .actions-toolbar .btn.btn-primary.btn-primary {
    white-space: nowrap !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* v1.4.1/v1.4.3: page-title-bar removal used to live here, scoped to
   body.account (Login/Create Account/Forgot Password). v1.4.4 replaced
   this with a single global rule in page-title-hide.css (hooked via
   default.xml), since the account-only scope missed Contact Us, Help
   Desk, and Blog — see that file's comment for the full reasoning.
   Nothing left to do here; kept this note so the history isn't lost. */