:root {
    --jma-primary: #E3243B;
    --jma-secondary: #C41E30;
    --jma-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --jma-radius-lg: 14px;
    --jma-radius-md: 10px;
    --jma-radius-pill: 100px;
    --jma-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Hide default WooCommerce navigation */
body.jammy-myaccount .woocommerce-MyAccount-navigation,
.jammy-myaccount .woocommerce-MyAccount-navigation {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.jammy-myaccount .woocommerce-MyAccount-content,
.jammy-myaccount .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
}

/* Remove any default WooCommerce/Astra my-account grid */
body.jammy-myaccount .woocommerce-account .woocommerce,
.jammy-myaccount .woocommerce-account .woocommerce {
    display: block !important;
    max-width: 100% !important;
}

/* Wrapper */
body.jammy-myaccount .jma-wrapper,
.jma-wrapper {
    font-family: var(--jma-font) !important;
    background: #f5f5f5 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
}

/* The My Account page is laid out with Elementor, whose column adds a default
   10px padding that doubles up with our own content padding - too much on
   mobile. Neutralise it here so only our own spacing applies. Scoped to our
   pages via the body class so Elementor is untouched everywhere else. */
body.jammy-myaccount .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
body.jammy-myaccount .elementor-widget-woocommerce-account-content .elementor-widget-container,
body.jammy-myaccount .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.jma-wrapper *,
.jma-wrapper *::before,
.jma-wrapper *::after {
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

.jma-header {
    background: linear-gradient(135deg, #E3243B 0%, #C41E30 100%) !important;
    color: white !important;
    padding: 12px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    min-height: 54px !important;
    margin: 12px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s ease !important;
}

.jma-header-shine {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

.jma-header-home,
.jma-header-section {
    position: relative !important;
}

.jma-header h1.jma-header-main-title,
.jma-header-main-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: white !important;
    line-height: 1.2 !important;
}

.jma-header-subtitle {
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    opacity: 0.9 !important;
    font-weight: 500 !important;
    color: white !important;
}

.jma-header-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    animation: jma-fadeIn 0.15s ease !important;
}

.jma-header-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    animation: jma-popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.jma-header h1.jma-header-title,
.jma-header-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: white !important;
    animation: jma-slideIn 0.2s ease forwards !important;
}

a.jma-back-btn,
.jma-back-btn {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    transition: background 0.2s !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

a.jma-back-btn:hover,
.jma-back-btn:hover {
    background: rgba(255,255,255,0.3) !important;
    color: white !important;
}

/* Flying icon */
.jma-flying-icon {
    position: fixed !important;
    font-size: 32px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

.jma-flying-icon.active {
    opacity: 1 !important;
    animation: jma-flyToCenter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════ */

.jma-content {
    padding: 12px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

/* Wider content area for sections (more room for forms/tables) */
body.jammy-myaccount-section .jma-content {
    max-width: 800px !important;
}

/* Reduce padding on mobile to maximize space */
@media (max-width: 600px) {
    .jma-content {
        padding: 8px !important;
    }
    
    body.jammy-myaccount-section .jma-content {
        padding: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD GRID
   ═══════════════════════════════════════════════════════════ */

.jma-dashboard {
    animation: jma-fadeIn 0.2s ease !important;
}

.jma-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

a.jma-tile,
.jma-tile {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    color: white !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    text-align: left !important;
    border: none !important;
    min-height: 90px !important;
}

a.jma-tile:hover,
.jma-tile:hover {
    transform: scale(1.03) !important;
    color: white !important;
    text-decoration: none !important;
}

a.jma-tile:active,
.jma-tile:active {
    transform: scale(0.97) !important;
}

a.jma-tile:focus,
.jma-tile:focus {
    outline: none !important;
    color: white !important;
}

.jma-tile-shine {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
    pointer-events: none !important;
    border-radius: 14px 14px 0 0 !important;
}

.jma-tile-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: white !important;
    color: #1a1a1a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    line-height: 1.2 !important;
    z-index: 5 !important;
}

.jma-tile-badge-wallet {
    color: #16a34a !important;
}

.jma-tile-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    display: block !important;
    line-height: 1 !important;
}

.jma-tile-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    position: relative !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: white !important;
    display: block !important;
}

.jma-tile-circle {
    position: absolute !important;
    bottom: -20px !important;
    right: -20px !important;
    width: 60px !important;
    height: 60px !important;
    background: white !important;
    opacity: 0.1 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   LOGOUT
   ═══════════════════════════════════════════════════════════ */

a.jma-logout-btn,
.jma-logout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 14px !important;
    background: white !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #E3243B !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
    transition: border-color 0.2s, background 0.2s !important;
}

a.jma-logout-btn:hover,
.jma-logout-btn:hover {
    border-color: #E3243B !important;
    background: #fff5f5 !important;
    color: #E3243B !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MY DETAILS - COLLAPSIBLE CARDS
   ═══════════════════════════════════════════════════════════ */

.jma-details-card {
    background: white !important;
    border-radius: 14px !important;
    border: 1.5px solid #e0e0e0 !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

button.jma-details-header,
.jma-details-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px !important;
    background: white !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: background 0.15s ease !important;
}

button.jma-details-header:hover,
.jma-details-header:hover {
    background: #fafafa !important;
}

.jma-details-card[data-jma-card][aria-expanded="true"] .jma-details-header,
.jma-details-card .jma-details-header[aria-expanded="true"] {
    border-bottom: 1px solid #e0e0e0 !important;
}

.jma-details-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #E3243B !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.jma-details-arrow {
    color: #888 !important;
    font-size: 18px !important;
    transition: transform 0.2s ease !important;
    line-height: 1 !important;
}

.jma-details-header[aria-expanded="true"] .jma-details-arrow {
    transform: rotate(0deg) !important;
}

.jma-details-body {
    padding: 16px 18px 6px !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* Form row styling within details cards */
.jma-details-body .form-row,
.jma-details-body .woocommerce-form-row {
    margin-bottom: 14px !important;
}

.jma-details-body .form-row label,
.jma-details-body .woocommerce-form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
}

.jma-details-body .form-row label .required {
    color: #E3243B !important;
    text-decoration: none !important;
}

.jma-details-body .form-row label .optional {
    color: #888 !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

.jma-details-body input[type="text"],
.jma-details-body input[type="email"],
.jma-details-body input[type="tel"],
.jma-details-body input[type="password"],
.jma-details-body select {
    width: 100% !important;
    padding: 10px 12px !important;
    background: #f7f7f7 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.jma-details-body input[type="text"]:focus,
.jma-details-body input[type="email"]:focus,
.jma-details-body input[type="tel"]:focus,
.jma-details-body input[type="password"]:focus,
.jma-details-body select:focus {
    outline: none !important;
    border-color: #E3243B !important;
    background: white !important;
}

/* Password field specific - clean styling for our custom eye toggle */
.jma-details-body .password-input,
.jma-details-body span.password-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.jma-details-body span.password-input input {
    width: 100% !important;
    padding-right: 42px !important;
}

/* Disable browser-native password reveal control (Edge/Chrome show their own eye icon) */
.jma-details-body input[type="password"]::-ms-reveal,
.jma-details-body input[type="password"]::-ms-clear,
.jma-details-body input[type="text"]::-ms-reveal,
.jma-details-body input[type="text"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Webkit (Chrome/Safari) password reveal */
.jma-details-body input[type="password"]::-webkit-credentials-auto-fill-button,
.jma-details-body input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Our custom eye toggle button - always present */
.jma-details-body .jma-password-toggle {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #888 !important;
    z-index: 2 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

.jma-details-body .jma-password-toggle:hover {
    color: #E3243B !important;
    background: rgba(227, 36, 59, 0.05) !important;
}

.jma-details-body .jma-password-toggle:focus {
    outline: none !important;
    color: #E3243B !important;
}

/* Hide WooCommerce default eye icon (we use our own consistent one) */
.jma-details-body .show-password-input {
    display: none !important;
}

/* Style password strength meter */
.jma-details-body .woocommerce-password-strength {
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.jma-details-body .woocommerce-password-strength.strong {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.jma-details-body .woocommerce-password-strength.good {
    background: #fefce8 !important;
    color: #ca8a04 !important;
    border: 1px solid #fef08a !important;
}

.jma-details-body .woocommerce-password-strength.short,
.jma-details-body .woocommerce-password-strength.bad {
    background: #fef2f2 !important;
    color: #C41E30 !important;
    border: 1px solid #fecaca !important;
}

.jma-details-body .woocommerce-password-hint {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    color: #666 !important;
    font-style: italic !important;
    line-height: 1.4 !important;
}

/* Two-column form rows for first/last name etc */
.jma-details-body .form-row-first,
.jma-details-body .woocommerce-form-row--first {
    width: 48% !important;
    float: left !important;
    margin-right: 4% !important;
}

.jma-details-body .form-row-last,
.jma-details-body .woocommerce-form-row--last {
    width: 48% !important;
    float: left !important;
    margin-right: 0 !important;
}

.jma-details-body::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* Mobile - stack two-column rows */
@media (max-width: 600px) {
    .jma-details-body .form-row-first,
    .jma-details-body .form-row-last,
    .jma-details-body .woocommerce-form-row--first,
    .jma-details-body .woocommerce-form-row--last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}

/* Nickname helper text */
.jma-nickname-helper {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-style: italic !important;
    line-height: 1.4 !important;
}

.jma-nickname-counter {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #888 !important;
}

.jma-nickname-counter.jma-over-limit {
    color: #E3243B !important;
    font-weight: 600 !important;
}

/* Save button styling - scoped to edit-account form only */
.woocommerce-EditAccountForm button[type="submit"],
.jma-details-actions button[type="submit"],
.jma-details-actions .button {
    background: linear-gradient(135deg, #E3243B 0%, #C41E30 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease, transform 0.1s ease !important;
    margin-top: 6px !important;
}

.woocommerce-EditAccountForm button[type="submit"]:hover,
.jma-details-actions button[type="submit"]:hover,
.jma-details-actions .button:hover {
    box-shadow: 0 4px 15px rgba(227, 36, 59, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Save button actions wrapper - sits outside the cards, always visible */
.jma-details-actions {
    margin-top: 14px !important;
    padding: 0 !important;
    text-align: center !important;
}

.jma-details-actions p,
.jma-details-actions .form-row {
    margin: 0 !important;
    padding: 0 !important;
}

.jma-details-actions button[type="submit"],
.jma-details-actions .button {
    width: 100% !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* WooCommerce error/notice styling within details */
.jma-section-content .woocommerce-error,
.jma-section-content .woocommerce-message,
.jma-section-content .woocommerce-info {
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 14px !important;
    list-style: none !important;
    border-left: 4px solid currentColor !important;
}

.jma-section-content .woocommerce-error {
    background: #fef2f2 !important;
    color: #C41E30 !important;
}

.jma-section-content .woocommerce-message {
    background: #f0fdf4 !important;
    color: #16a34a !important;
}

/* ═══════════════════════════════════════════════════════════
   WALLET HERO SECTION
   ═══════════════════════════════════════════════════════════ */

.jma-wallet-hero {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border-radius: 14px !important;
    padding: 16px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.jma-wallet-hero-shine {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

.jma-wallet-hero-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    opacity: 0.95 !important;
    position: relative !important;
    color: white !important;
    margin: 0 !important;
}

.jma-wallet-hero-amount {
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 2px 0 0 0 !important;
    position: relative !important;
    color: white !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
}/* Wallet action buttons - 4 column grid */
.jma-wallet-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

a.jma-wallet-action,
.jma-wallet-action {
    background: white !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 14px 6px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    transition: all 0.15s ease !important;
    text-align: center !important;
}

a.jma-wallet-action:hover,
.jma-wallet-action:hover {
    border-color: #E3243B !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
}

a.jma-wallet-action.active,
.jma-wallet-action.active {
    background: white !important;
    border: 2.5px solid #E3243B !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(227, 36, 59, 0.2) !important;
}

a.jma-wallet-action.active:hover,
.jma-wallet-action.active:hover {
    background: white !important;
    border-color: #C41E30 !important;
    color: #1a1a1a !important;
    transform: none !important;
}

.jma-wallet-action-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

/* Make sure emoji-as-images render at correct size */
.jma-wallet-action-icon img {
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
}

.jma-wallet-action-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .jma-wallet-hero {
        padding: 12px !important;
    }
    
    .jma-wallet-hero-amount {
        font-size: 26px !important;
    }
    
    a.jma-wallet-action,
    .jma-wallet-action {
        padding: 10px 4px !important;
        gap: 4px !important;
    }
    
    .jma-wallet-action-icon {
        font-size: 20px !important;
    }
    
    .jma-wallet-action-label {
        font-size: 9px !important;
        letter-spacing: 0.3px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SECTION VIEW
   ═══════════════════════════════════════════════════════════ */

.jma-section {
    animation: jma-slideUp 0.2s ease !important;
}

.jma-section-card {
    background: white !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1.5px solid #e0e0e0 !important;
    min-height: 200px !important;
}

/* Wallet, Tickets, Wins, Orders & Responsible Play sections: no white card wrapper - lets items sit on page bg with proper gaps */
body.jammy-myaccount-section-wallet .jma-section-card,
body.jammy-myaccount-section-tickets .jma-section-card,
body.jammy-myaccount-section-wins .jma-section-card,
body.jammy-myaccount-section-orders .jma-section-card,
body.jammy-myaccount-section-responsible .jma-section-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

body.jammy-myaccount-section-wallet .jma-section-content,
body.jammy-myaccount-section-tickets .jma-section-content,
body.jammy-myaccount-section-wins .jma-section-content,
body.jammy-myaccount-section-orders .jma-section-content,
body.jammy-myaccount-section-responsible .jma-section-content {
    padding: 0 !important;
}

/* ============================================
   ORDERS - Jammy card layout
   ============================================ */
.jma-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.jma-order-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
    box-shadow: none !important;
}
.jma-order-card:hover {
    border-color: #E3243B !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.jma-order-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #fef2f2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.jma-order-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.jma-order-number {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
}

.jma-order-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.jma-order-meta .jma-order-date,
.jma-order-meta .jma-order-items {
    font-size: 12px !important;
    color: #888 !important;
}
.jma-order-meta .jma-order-sep {
    color: #ccc !important;
}
.jma-order-badge {
    background: #dcfce7 !important;
    color: #166534 !important;
    padding: 2px 8px !important;
    border-radius: 100px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.jma-order-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}
.jma-order-total {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    white-space: nowrap !important;
}
.jma-order-total .woocommerce-Price-amount {
    font-weight: 800 !important;
}
.jma-order-view-btn {
    background: linear-gradient(135deg, #E3243B 0%, #C41E30 100%) !important;
    color: #fff !important;
    padding: 7px 16px !important;
    border-radius: 100px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(227, 36, 59, 0.2) !important;
}

/* Orders pagination */
.jma-orders-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
.jma-orders-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 20px !important;
    background: #fff !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 100px !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
.jma-orders-page-btn:hover {
    border-color: #E3243B !important;
    color: #E3243B !important;
}

/* Orders empty state */
.jma-orders-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    background: #fff !important;
    border: 1.5px dashed #e0e0e0 !important;
    border-radius: 14px !important;
}
.jma-orders-empty-icon { font-size: 40px !important; margin-bottom: 8px !important; }
.jma-orders-empty-title { font-size: 18px !important; font-weight: 800 !important; color: #1a1a1a !important; margin-bottom: 6px !important; }
.jma-orders-empty-text { font-size: 14px !important; color: #888 !important; line-height: 1.5 !important; max-width: 360px !important; margin: 0 auto 16px !important; }
.jma-orders-empty-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #E3243B 0%, #C41E30 100%) !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(227,36,59,0.25) !important;
}

@media (max-width: 600px) {
    .jma-order-card {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }
    .jma-order-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 17px !important;
    }
    .jma-order-right {
        width: 100% !important;
        justify-content: space-between !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    .jma-order-number {
        font-size: 13px !important;
    }
}

.jma-section-subnav {
    border-bottom: 1px solid #e0e0e0 !important;
}

a.jma-subnav-item,
.jma-subnav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}

a.jma-subnav-item:last-child,
.jma-subnav-item:last-child {
    border-bottom: none !important;
}

a.jma-subnav-item:hover,
.jma-subnav-item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

a.jma-subnav-item.active,
.jma-subnav-item.active {
    background: rgba(227, 36, 59, 0.05) !important;
    color: #E3243B !important;
}

.jma-subnav-arrow {
    color: #888 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

.jma-subnav-item.active .jma-subnav-arrow {
    color: #E3243B !important;
}

.jma-section-content {
    padding: 0 !important;
}

/* Add padding back for content that doesnt have its own card wrapper */
.jma-section-content > p,
.jma-section-content > h2,
.jma-section-content > h3,
.jma-section-content > h4,
.jma-section-content > form,
.jma-section-content > table,
.jma-section-content > .woocommerce-MyAccount-orders,
.jma-section-content > .woocommerce-Message,
.jma-section-content > .woocommerce-info,
.jma-section-content > .woocommerce-error {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.jma-section-content > p:first-child,
.jma-section-content > h2:first-child,
.jma-section-content > h3:first-child {
    padding-top: 20px !important;
}

/* Form always gets top padding regardless of position (something invisible
   might render before it, preventing :first-child from matching) */
.jma-section-content > form,
.jma-section-content .woocommerce-EditAccountForm {
    padding-top: 20px !important;
}

.jma-section-content > p:last-child,
.jma-section-content > form:last-child,
.jma-section-content > table:last-child {
    padding-bottom: 20px !important;
}

/* Make sure form inputs and tables dont overflow on mobile */
.jma-section-content input[type="text"],
.jma-section-content input[type="email"],
.jma-section-content input[type="password"],
.jma-section-content input[type="number"],
.jma-section-content input[type="tel"],
.jma-section-content select,
.jma-section-content textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tables should scroll horizontally on mobile if needed */
.jma-section-content {
    overflow-x: auto !important;
}

/* Reduce inner padding on mobile */
@media (max-width: 600px) {
    .jma-section-content > p,
    .jma-section-content > h2,
    .jma-section-content > h3,
    .jma-section-content > h4,
    .jma-section-content > form,
    .jma-section-content > table,
    .jma-section-content > .woocommerce-MyAccount-orders,
    .jma-section-content > .woocommerce-Message,
    .jma-section-content > .woocommerce-info,
    .jma-section-content > .woocommerce-error {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Style WooCommerce content */
.jma-section-content h2,
.jma-section-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
}

.jma-section-content table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.jma-section-content table th,
.jma-section-content table td {
    padding: 12px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    text-align: left !important;
}

.jma-section-content .woocommerce-Button,
.jma-section-content .button {
    background: linear-gradient(135deg, #E3243B 0%, #C41E30 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s !important;
}

.jma-section-content .woocommerce-Button:hover,
.jma-section-content .button:hover {
    box-shadow: 0 4px 15px rgba(227, 36, 59, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   QUICK NAV PILLS
   ═══════════════════════════════════════════════════════════ */

.jma-quick-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

a.jma-quick-nav-pill,
.jma-quick-nav-pill {
    background: white !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 100px !important;
    padding: 10px 14px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

a.jma-quick-nav-pill:hover,
.jma-quick-nav-pill:hover {
    border-color: #E3243B !important;
    transform: scale(1.1) !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes jma-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jma-slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes jma-slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes jma-popIn {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes jma-flyToCenter {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(-50% + var(--jma-deltaX, 0px)), 
            calc(-50% + var(--jma-deltaY, 0px))
        ) scale(0.9);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    .jma-content {
        padding: 20px !important;
    }
    
    .jma-grid {
        gap: 12px !important;
    }
    
    a.jma-tile,
    .jma-tile {
        padding: 20px 16px !important;
        min-height: 110px !important;
    }
    
    .jma-tile-icon {
        font-size: 40px !important;
        margin-bottom: 10px !important;
    }
    
    .jma-tile-label {
        font-size: 12px !important;
    }
}