/* Base */
body { margin: 0 auto; width: 100%; padding: 0; max-width: 30rem; color: #333; position: relative; }
p { line-height: 1.5; margin: 0; }
h2, h3 { margin: 0; }
.icon { width: 1.5rem; height: 1.5rem; }
a { text-decoration: none; user-select: none; }

/* THEME: Warm & Professional */
:root {
    /* Accents */
    --brand-red: #A84438;     /* Terracotta/Brick Red (Elegant warm accent) */
    --brand-yellow: #E6B422;  /* Muted Gold/Mustard (Professional, less neon) */

    /* Typography */
    --ink: #2C2621;           /* Deep Warm Brown/Black (for high contrast areas) */
    --text: #423B35;          /* Warm Charcoal (softer than black) */

    /* Backgrounds */
    --page: #EBE7E0;          /* Warm Beige/Taupe (Outer background) */
    --paper: #FDFBF7;         /* Creamy White (Card background) */

    color-scheme: light;
}

/* Fonts */
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('./fonts/noto-sans-v42-latin-800italic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap}
body, #body, .textColor, .sub, .bizaddr { color: var(--text)!important; font-family: 'Noto Sans', system-ui, -apple-system, sans-serif !important; }

/* Layout */
html { background: var(--page) !important; }
body { background: var(--paper) !important; min-height: 100vh; }

@media (min-width: 520px) {
    body {
        border-radius: 14px;
        /* Warmer, softer shadows */
        box-shadow: 0 10px 24px rgba(60, 50, 40, 0.12), 0 2px 6px rgba(60, 50, 40, 0.08);
        border: 1px solid rgba(120, 110, 100, 0.08);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Modal */
#modal { display: flex; flex-direction: column; position: absolute; z-index: 3; width: 100%; bottom: 0; transition: top .2s ease-out, opacity .1s ease-out; transform: translateZ(0); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 10px rgba(60,50,40,0.1); }
#close { align-self: end; padding: 1rem; cursor: pointer; line-height: 0; }
#copyView, #qrView { display: flex; flex-direction: column; align-items: center; margin: 0 1rem; text-align: center; }
#copyView p, #qrView p { margin: 2rem; }
#copyURL { display: flex; width: 100%; align-items: center; justify-content: center; border-radius: .75rem; padding: 1rem 1.25rem; border: none; outline: none; cursor: pointer; box-sizing: border-box; }
#copyURL span { margin-left: .5rem; }
#qrView h3 { margin: 2rem 2rem 0; }
#qrView p { margin: .5rem 2rem 0; }
#qr { margin: 2rem; padding: 2rem; background: #fff; border-radius: .5rem; border: 1px solid #ddd; }

/* Header */
header { display: flex; justify-content: flex-start; flex-direction: column; padding-top: .25rem; }
.headerImgC { display: grid; grid-template-columns: auto; grid-template-rows: auto; overflow: hidden; border-radius: 14px 14px 0 0; }
#cover { grid-column: 1; grid-row: 1; width: 100%; height: 18rem; object-position: center; object-fit: cover; filter: sepia(10%) contrast(95%); /* Slight warm filter on cover */ }
#topActions { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; position: absolute; top: 0; right: 0; width: 100%; z-index: 2; }
#topActions > div { display: flex; }
#topActions a { padding: 1rem; cursor: pointer; line-height: 0; }
#topActions .icon { color: rgba(40,35,30,0.7); background: rgba(255,255,255,0.85); border-radius: 50%; padding: 4px; backdrop-filter: blur(4px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
#topActions a:hover .icon { color: #000; background: #fff; }

/* Main Content */
main { padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); border-radius: 0 0 14px 14px; }
#profilePhoto { width: 10rem; height: 10rem; border-radius: .5rem; box-sizing: content-box; user-select: none; margin-top: -6rem; border: 4px solid var(--paper); box-shadow: 0 4px 12px rgba(60,50,40,0.15); z-index: 2; object-fit: cover; }
#info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-top: 1rem; line-height: 1.25; word-break: break-word; padding: .25rem 1rem; border-left: .25rem solid var(--brand-yellow); }

.name { font-weight: 800; font-size: 1.8rem; margin: 0; color: var(--ink); }
.pronouns { display: block; font-size: .95rem; opacity: .7; margin: 0 0 .5rem; font-style: italic; }
.bizname { font-size: 1rem; margin: .5rem 0 0 0; opacity: .9; font-weight: 600; }
.bizaddr { font-size: .9rem; opacity: .8; }
.sub { font-size: .95rem; margin: .75rem 0 0; opacity: .85; line-height: 1.6; }

/* CTA Button */
#cta { display: flex; align-items: center; border-radius: .75rem; margin-top: 2rem; padding: 1rem 1.25rem; cursor: pointer; line-height: 0; justify-content: center; box-sizing: border-box; background: var(--brand-yellow) !important; color: var(--ink) !important; border: none; width: 100%; transition: all 0.2s ease; }
#cta .icon { margin-right: .6rem; }
#cta p { margin: 0; font-weight: 800; letter-spacing: 0.02em; }

/* Action Tiles */
.actions { width: 100%; margin-top: 2rem; display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; }
.actionBtn { display: flex; flex-direction: row; align-items: center; }
.actionBtn a { display: flex; align-items: center; justify-content: center; border-radius: .75rem; width: 3.75rem; height: 3.75rem; line-height: 0; background: #F2EFE9; /* Warmer gray for buttons */ transition: all 0.2s; }
.actionBtn p { margin: 0 0 0 .9rem; font-size: 1rem; white-space: nowrap; font-weight: 500; color: var(--text); }

/* Colors & Icons */
.actions .actionBtn > a, #copyURL { background: var(--brand-yellow) !important; color: var(--ink) !important; border: none !important; box-shadow: none !important; }
.iconColor { color: currentColor !important; }
.iconTile svg { display: block; width: 24px; height: 24px; }

/* Hover States - Warm Terracotta */
.actions .actionBtn > a:hover, #cta:hover, #copyURL:hover, .secBtn a:hover {
    background: var(--brand-red) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(168, 68, 56, 0.25) !important;
}

/* Secondary Buttons (Small) */
.secondary { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
.secBtn a { background: var(--brand-yellow) !important; color: var(--ink) !important; width: 3.5rem; height: 3.5rem; }
.secBtn .icon svg { width: 20px; height: 20px; }
.secBtn .icon svg [fill="#fff"] { fill: currentColor; }

/* PayPal Specific */
.secBtn.paypal a { background: #003087 !important; color: #fff !important; }
.secBtn.paypal .icon svg [fill] { fill: #fff !important; }
.secBtn.paypal a:hover { background: #001c50 !important; }

/* Mobile */
@media (max-width: 380px) {
    .actions { grid-template-columns: 1fr; }
    #profilePhoto { width: 9rem; height: 9rem; margin-top: -5rem; }
    #info .name { font-size: 1.6rem; }
}