/* == Bizpart MyAccount Styles == */

/* ===== Account details view ===== */
.account-details-view { max-width: 420px; }
.pending-email-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    max-width: 420px;
}
.pending-email-notice p { font-size: 14px; margin: 0 0 4px; }
.pending-email-notice p:last-child { margin: 0; }
.details-row {
    display: flex;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
}
.details-row:last-of-type { border-bottom: none; }
.details-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    min-width: 100px;
    flex-shrink: 0;
}
.details-val { color: #1e293b; }
.details-edit-link {
    font-size: 15px;
    color: #27ba5b;
    cursor: pointer;
    text-decoration: underline;
}
.details-edit-link:hover { opacity: 0.8; }

/* ===== Addresses ===== */
.addr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.addr-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px 12px;
    background: #fff;
    font-size: 15px;
    line-height: 1.6;
    transition: border-color 0.15s;
}
.addr-card:hover { border-color: #94a3b8; }
.addr-card-body p { margin: 0; color: #334155; }
.addr-name { font-weight: 600; margin-bottom: 2px !important; }

.addr-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.addr-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.addr-badge.billing  { background: #dbeafe; color: #1e40af; }
.addr-badge.shipping { background: #dcfce7; color: #166534; }
.addr-set-default {
    font-size: 15px;
    color: #94a3b8;
    cursor: pointer;
    text-decoration: underline;
}
.addr-set-default:hover { color: #27ba5b; }

.addr-delete {
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.addr-delete:hover { color: #ef4444; }

/* Add address form */
.add-addr-section .add-addr-toggle a { cursor: pointer; font-size: 15px; font-weight: 600; }
.add-addr-section .add-addr-toggle a:hover { opacity: 0.8; }

.addr-form {
    max-width: 520px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-top: 12px;
}
.addr-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
    flex: 1;
}
.addr-form-field label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
}
.addr-form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.addr-form-field input,
.addr-form-field select {
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s;
}
.addr-form-field input:focus,
.addr-form-field select:focus {
    outline: none;
    border-color: #27ba5b;
    box-shadow: 0 0 0 3px rgba(39,186,91,0.1);
}
.addr-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.addr-form-field-sm { flex: 0 0 90px; }
.addr-form-field-half { max-width: 180px; }

.addr-form-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.addr-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #334155;
    cursor: pointer;
    min-width: 0;
    font-weight: 400;
}
.addr-check-label input[type="checkbox"] { flex-shrink: 0; width: auto; }

.account-container { min-height: 500px; }
.account-container .leftCol { width: 17%; }
.account-container .rightCol { width: 78%; }

/* Base — bring account text in line with the rest of the site */
.account-container p,
.account-container li { font-size: 15px; }
.account-container input,
.account-container select,
.account-container textarea { font-size: 15px; }
.account-container label { font-size: 15px; }
.account-container h4 { font-size: 22px; margin-bottom: 20px; }
.account-container h5 { font-size: 17px; }

/* Tableify overrides for account area */
.account-container .tableify { margin: 0 0 20px; }
.account-container .tableify th,
.account-container .tableify td {
    font-size: 15px;
    text-align: left;
    padding: 10px 12px;
}
.account-container .tableify th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 15px;
}
.account-container .tableify td a { font-size: 15px; }

#account-nav ul { list-style: none; margin: 0; padding: 0; }
#account-nav ul li { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 15px; }
#account-nav ul li.active { font-weight: 700; }
#account-nav ul li a { color: #333; text-decoration: none; }
#account-nav ul li a:hover { color: #27ba5b; }

.page-form label { font-weight: 600; display: inline-block; min-width: 130px; }

/* ===== Tabs ===== */
ul.tab-selectors {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    gap: 4px;
}
ul.tab-selectors li { margin: 0; }
ul.tab-selectors li a {
    display: block;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
ul.tab-selectors li a:hover { color: #1e293b; }
ul.tab-selectors li a.active-tab {
    color: #27ba5b;
    border-bottom-color: #27ba5b;
}

/* ===== Media section headings ===== */
.media-section { margin-bottom: 24px; }
.media-section-label {
    font-size: 15px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.media-note {
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
    margin-left: 6px;
}

/* ===== Media grid ===== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.files-grid { grid-template-columns: repeat(5, 1fr); }

/* ===== Media tile ===== */
.media-tile {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s;
    cursor: pointer;
}
.media-tile:hover { border-color: #94a3b8; }
.media-tile.selected {
    border-color: #27ba5b;
    background: #f0fdf4;
}
.media-tile.store-tile {
    border-color: #bfdbfe;
    background: #eff6ff;
    cursor: default;
}

.media-thumb {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background: #f8fafc;
    overflow: hidden;
}
.media-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}
.file-tile .media-thumb img {
    object-fit: contain;
    padding: 16px;
}

/* ===== Orders — list ===== */
.tableify td a { color: #27ba5b; text-decoration: none; font-size: 15px; }
.tableify td a:hover { text-decoration: underline; }

/* ===== Order detail ===== */
.order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.order-detail-title { display: flex; flex-direction: column; gap: 4px; }
.order-detail-title h4 { margin: 0; }
.order-num { color: #27ba5b; }
.order-back {
    font-size: 15px;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
}
.order-back:hover { color: #27ba5b; }
.order-detail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Status badge */
.order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.status-green  { background: #dcfce7; color: #166534; }
.status-blue   { background: #dbeafe; color: #1e40af; }
.status-orange { background: #ffedd5; color: #9a3412; }
.status-red    { background: #fee2e2; color: #991b1b; }
.status-gray   { background: #f1f5f9; color: #475569; }

/* PDF button */
.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-pdf:hover { background: #f0fdf4; border-color: #27ba5b; color: #27ba5b; }
.btn-pdf svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Meta cards */
.order-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.order-meta-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
}
.meta-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.meta-value { font-size: 15px; color: #1e293b; line-height: 1.5; margin: 0; }

/* Items list */
.order-items-list {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.order-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.order-item-row:last-child { border-bottom: none; }
.order-item-row:nth-child(even) { background: #fafbfc; }

.order-item-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}
.order-item-img-placeholder { width: 100%; height: 100%; background: #e2e8f0; }

.order-item-info { flex: 1; min-width: 0; }
.order-item-name { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 2px; }
.order-item-part { color: #64748b; margin-bottom: 4px; }
.order-item-msg  { color: #64748b; font-style: italic; margin-top: 4px; }

.order-item-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.opt-pill {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 15px;
    color: #475569;
}
.order-item-cust-opts { margin-top: 4px; }
.opt-cust {
    display: block;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

.order-item-qty,
.order-item-price {
    text-align: center;
    flex-shrink: 0;
    min-width: 52px;
}
.order-item-qty-val  { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0; }
.order-item-price-val { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0; white-space: nowrap; }

/* Totals card */
.order-totals-card {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}
.order-totals-inner {
    min-width: 260px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
}
.order-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 15px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}
.order-total-line:last-child { border-bottom: none; }
.order-total-discount span:last-child { color: #ef4444; }
.order-grand-total {
    margin-top: 8px;
    padding-top: 12px !important;
    border-top: 2px solid #e2e8f0 !important;
    border-bottom: none !important;
    font-size: 16px !important;
    font-weight: 700;
    color: #1e293b !important;
}
.order-grand-total span:last-child { color: #27ba5b; }

/* ===== Payment method cards ===== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.card-tile {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    background: #fff;
    transition: border-color 0.15s;
}
.card-tile.card-default { border-color: #27ba5b; background: #f0fdf4; }
.card-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.card-brand-icon { height: 22px; width: auto; display: block; }
.card-brand-text { font-size: 15px; font-weight: 600; color: #475569; }
.card-default-badge {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #27ba5b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
}
.card-number {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1e293b;
    margin-bottom: 2px;
}
.card-expiry { color: #64748b; margin-bottom: 10px; }
.card-tile-actions { display: flex; gap: 12px; }
.card-tile-actions a {
    font-size: 15px;
    cursor: pointer;
    text-decoration: underline;
    color: #64748b;
}
.card-tile-actions .card-delete { color: #ef4444; }
.card-tile-actions a:hover { opacity: 0.7; }

/* Add card form */
.add-card-toggle a { cursor: pointer; color: #27ba5b; font-size: 15px; font-weight: 600; }
.add-card-toggle a:hover { opacity: 0.8; }

.card-form {
    max-width: 400px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-top: 12px;
}
.card-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.card-form-field label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    min-width: 0;
}
.card-form-field input {
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
    width: 100%;
}
.card-form-field input:focus {
    outline: none;
    border-color: #27ba5b;
    box-shadow: 0 0 0 3px rgba(39,186,91,0.1);
}
.card-form-row {
    display: flex;
    gap: 16px;
}
.card-form-row .card-form-field { flex: 1; }

/* Expiration inline */
.exp-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.exp-inputs input { width: 64px !important; text-align: center; }
.exp-inputs input:last-child { width: 72px !important; }
.exp-sep { font-size: 16px; color: #94a3b8; font-weight: 300; }

/* Card number with brand overlay */
.card-form .card-input-wrap { position: relative; display: block; }
.card-form #pm-card-number { display: block; width: 100%; box-sizing: border-box; }
.card-form #pm-brand-display {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.card-form #pm-card-number.has-brand { padding-right: 58px; }

@media only screen and (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 600px) {
    .cards-grid { grid-template-columns: 1fr; }
}

/* Delete button */
.media-remove {
    position: absolute;
    top: 5px; right: 5px;
    width: 22px; height: 22px;
    background: rgba(239,68,68,0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.15s;
}
.media-remove:hover { background: #dc2626; }
.media-tile:hover .media-remove { display: flex; }

/* Store badge */
.store-badge {
    position: absolute;
    bottom: 5px; left: 5px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Tile footer */
.media-footer {
    padding: 6px 8px;
    border-top: 1px solid #f1f5f9;
    font-size: 15px;
}
.media-footer label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    min-width: 0;
    font-weight: 400;
    width: 100%;
}
.media-footer input[type="radio"] { flex-shrink: 0; }
.media-tile.selected .media-footer label span { color: #16a34a; font-weight: 600; }

.media-name {
    padding: 4px 8px 6px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.media-name a { color: #3b82f6; text-decoration: none; }
.media-name a:hover { text-decoration: underline; }

/* ===== Responsive ===== */
@media only screen and (max-width: 1140px) {
    .media-grid { grid-template-columns: repeat(3, 1fr); }
    .files-grid  { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (max-width: 768px) {
    .account-container .leftCol,
    .account-container .rightCol { width: 100%; float: none; }
    #account-nav { margin-bottom: 20px; }
    #account-nav ul { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: none; }
    #account-nav ul li { border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px 10px; font-size: 15px; }
    .media-grid { grid-template-columns: repeat(2, 1fr); }
    .files-grid  { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 480px) {
    .media-grid { grid-template-columns: repeat(2, 1fr); }
    .files-grid  { grid-template-columns: repeat(2, 1fr); }
}