/* ═══════════════════════════════════════════════════════════════ Address listing cards (WC My Account → Addresses). Loaded from class-war-verified-store.php → inject_card_css(). Hide original WC content instantly — JS reveals styled cards. This MUST load in to prevent any flash. ═══════════════════════════════════════════════════════════════ */ .woocommerce-Addresses .woocommerce-Address-title, .woocommerce-Addresses header.title, .woocommerce-Addresses address, .woocommerce-Addresses .col-1 > *, .woocommerce-Addresses .col-2 > *, .woocommerce-Addresses .u-column1 > *, .woocommerce-Addresses .u-column2 > * { opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; transition: none !important; } /* Once JS has built the cards, show everything */ .war-cards-done .war-addr-card, .war-cards-done .war-addr-card * { opacity: 1 !important; height: auto !important; overflow: visible !important; } /* Fallback: if JS hasn't run after 1.5s, fade in original content */ @keyframes war-fallback-show { to { opacity: 1; height: auto; overflow: visible; } } .woocommerce-Addresses:not(.war-cards-done) .woocommerce-Address-title, .woocommerce-Addresses:not(.war-cards-done) header.title, .woocommerce-Addresses:not(.war-cards-done) address { animation: war-fallback-show 0s 1.5s forwards; } /* ── Two-column layout for billing + shipping cards ── */ .woocommerce-Addresses.addresses, .woocommerce-Addresses.col2-set { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; } .woocommerce-Addresses .col-1, .woocommerce-Addresses .col-2, .woocommerce-Addresses .u-column1, .woocommerce-Addresses .u-column2 { flex: 1 1 calc(50% - 10px) !important; min-width: 280px !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; } /* ── Card shell ── */ .war-addr-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .03); transition: box-shadow .15s ease; overflow: hidden; display: flex; flex-direction: column; } .war-addr-card:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 20px rgba(15, 23, 42, .06); } .war-addr-card--verified { border-color: #bbf7d0; } /* ── Card header ── */ .war-addr-card__head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 24px 0 !important; gap: 12px !important; background: transparent !important; border: none !important; margin: 0 !important; } .war-addr-card__title { margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #0f172a !important; letter-spacing: -0.01em !important; text-transform: none !important; border: none !important; line-height: 1.3 !important; } .war-addr-card__edit { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; color: #3b82f6 !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 6px !important; text-decoration: none !important; transition: all .15s ease !important; white-space: nowrap !important; line-height: 1.4 !important; } .war-addr-card__edit:hover { background: #dbeafe !important; border-color: #93c5fd !important; color: #2563eb !important; text-decoration: none !important; } /* ── Status badge ── */ .war-addr-card__status { padding: 14px 24px 0; } .war-addr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; } .war-addr-pill--ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .war-addr-pill--ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; } .war-addr-pill--no { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } .war-addr-pill--no::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; } /* ── Card body ── */ .war-addr-card__body { padding: 16px 24px 22px; flex: 1; } .war-addr-card__body address { font-style: normal !important; font-size: 14px !important; line-height: 1.75 !important; color: #334155 !important; margin: 0 !important; padding: 0 !important; } .war-addr-card__empty { padding: 20px 24px 24px; flex: 1; } .war-addr-card__empty p { color: #94a3b8 !important; font-size: 13.5px !important; font-style: italic !important; margin: 0 !important; } /* ── Hide original WC header once cards are applied ── */ .war-cards-done .woocommerce-Address-title, .war-cards-done header.title { display: none !important; } /* ── Responsive ── */ @media (max-width: 600px) { .woocommerce-Addresses.addresses, .woocommerce-Addresses.col2-set { flex-direction: column !important; } .war-addr-card__head { padding: 16px 18px 0; } .war-addr-card__status { padding: 12px 18px 0; } .war-addr-card__body { padding: 14px 18px 18px; } }