/*
 * Public profile card — profile-specific styles only.
 * Everything shared (buttons, modals, typography, utilities, tokens)
 * comes from global.css, which is always loaded before this file — so every
 * color/radius/font-size is a global CSS variable, no static values.
 *
 * Design ported from the old theme's profile styles (style.css): tinted
 * bottom-rounded wrapper, 260px banner, avatar ring overlapping the banner,
 * round QR scan button on the ring, detail rows + action buttons + social
 * grid on the tinted ground, and the store/wallet groups as white rounded
 * cards stacked below.
 */

/* ---------- Custom profile fonts ------------------------------------------
   The Theme page's font selectors (rcd_get_theme_fonts()) store these family
   names; company.css declares them for the dashboard PREVIEW only, so the
   public profile must declare them too or the saved font-family rules silently
   fall back to sans-serif. Same bundled files, same relative path
   (both stylesheets live in assets/css/). --------------------------------- */
@font-face {
    font-family: 'TheSans-Bold';
    src: url('../fonts/TheSans-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FS-Industrie-Wd-Book';
    src: url('../fonts/FS-Industrie-Wd-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel100Black-55';
    src: url('../fonts/Sequel100Black-55.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal-Medium';
    src: url('../fonts/Tajawal-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------- Page loader launch icon -----------------------------------------
   Injected by profile-view.php (replaces the default spinner while the page
   loads). Sizing + entrance/exit animations live here; only the company's
   dynamic launch background color stays inline in the template.
   profile.js adds .rcd-launch-out when the loader hides. */
.rcd-page-loader img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    opacity: 0;
    transform: scale(.5);
    animation: rcd-launch-in .9s ease-out .15s forwards;
}
.rcd-page-loader img.rcd-launch-out {
    animation: rcd-launch-out .45s ease-in forwards;
}
/* Launch logo entrance: scales up from the back (small + faded) to its full
   size and holds there while the page loads; the exit scales back and fades. */
@keyframes rcd-launch-in {
    from { opacity: 0; transform: scale(.5); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes rcd-launch-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.5); }
}
/* Company launch background (set inline by profile-view.php) drops the
   default blur so the solid color reads cleanly. */
.rcd-page-loader.rcd-launch-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* State card (not found / deactivated / expired) — ui-card + own sizing. */
.rcd-p-state {
    max-width: 480px;
    width: 100%;
    padding: 48px 32px;
}

/* ---------- Wrapper (tinted, bottom-rounded — .preview-design-wrapper) ---- */
.rcd-p-card {
    background: var(--color-surface-muted);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    max-width: 500px;
    width: 100%;
    overflow: hidden;
}

/* ---------- Banner (.company-banner / .company-banner-img, style.css) ----- */
.rcd-p-banner {
    position: relative;
    height: 260px;
    overflow: hidden;
}
/* Plain <img> — 100% of the 260px banner box, cover-cropped. The inline
   top offset (cover_photo_top_position) shifts the crop, so the img is
   absolutely positioned to allow it. */
.rcd-p-banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Header (.company-profile-top / .user-info-wrapper) ---------- */
.rcd-p-head {
    padding: 0 30px 20px;
}
/* Avatar ring (.profile-wrapper) — overlapping the banner. */
.rcd-p-avatar-wrap {
    width: 140px; /* 120px img + 10px ring padding */
    margin: -70px auto 0;
    padding: 10px;
    background: var(--color-surface-muted);
    border-radius: var(--border-radius-full);
    box-shadow: 0 0 5px 3px rgba(80, 80, 80, .3);
    position: relative;
}
.rcd-p-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    display: block;
}
/* QR scan button (.btn.icon-btn.qrScan) — round, on the ring's right edge. */
.rcd-p-qr-btn {
    position: absolute;
    right: -12px;
    top: 65%;
    width: auto;
    padding: 10px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    color: var(--color-surface);
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: background .15s ease;
}
.rcd-p-qr-btn:hover,
.rcd-p-qr-btn:focus-visible {
    opacity: .85;
}

.rcd-p-info-top {
    text-align: center;
    margin-top: 14px;
}
.rcd-p-name {
    font-size: var(--main-heading-font-size);
    font-weight: var(--heading-font-weight);
}
.rcd-p-name-ar {
    font-size: var(--small-heading-font-size);
    font-weight: var(--small-font-weight);
    line-height: 1.4;
}
.rcd-p-position {
    font-size: var(--small-heading-font-size);
    color: var(--color-secondary);
}
/* ---------- Detail rows (.profile-details) ---------- */
.rcd-p-row {
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: var(--color-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--neutral-border);
}
.rcd-p-details .rcd-p-row:last-child,
.rcd-p-store-group .rcd-p-row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
/* Hover = opacity only, no color changes — colors will be handled
   dynamically (per-company branding) later. */
a.rcd-p-row:hover {
    opacity: .8;
}
.rcd-p-row-icon {
    color: var(--color-primary);
    font-size: var(--sub-heading-font-size);
    line-height: 1;
    flex: none;
}
.rcd-p-row-body {
    min-width: 0;
    flex: 1;
}
.rcd-p-row-label {
    display: block;
    color: var(--neutral-grey);
    font-size: var(--mini-main-content);
    line-height: 1.3;
}
.rcd-p-row-value {
    display: block;
    font-size: var(--main-content);
    font-weight: var(--medium-font-weight);
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.rcd-p-row-arrow {
    color: var(--neutral-grey);
    font-size: var(--small-heading-font-size);
    flex: none;
    line-height: 1;
}

/* ---------- Action buttons (.company-buttom-main) ---------- */
.rcd-p-actions {
    padding: 16px 16px 20px;
    max-width: 390px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.rcd-p-btn {
    flex: 1;
}
.rcd-p-btn .fi {
    font-size: var(--main-content);
    line-height: 1;
}

/* ---------- Section headings ---------- */
/* Main heading (Social Networks) — with the accent underline bar. */
.rcd-p-section-title {
    font-size: var(--small-heading-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--color-secondary);
    margin: 0 0 14px;
}
.rcd-p-section-title::after {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 5px;
}
/* Inner headings (Play Store / App Store / Web App) — plain bold. */
.rcd-p-store-group .rcd-p-section-title::after {
    display: none;
}

/* ---------- White sub-cards (.user-info-wrappers) — social / details /
   store groups / wallet, all consistent ------------------------------- */
.rcd-p-social,
.rcd-p-details,
.rcd-p-store-group,
.rcd-p-wallet {
    background: var(--color-surface);
    border-radius: var(--border-radius-medium);
    margin: 0 10px 10px;
    padding: 20px 30px;
}
.rcd-p-social-grid {
    flex-wrap: wrap;
    gap: 10px;
}
/* .profile-social-icons — bordered squares, not filled circles. */
.rcd-p-social-btn {
    color: var(--color-primary);
    font-size: 22px;
    border: 1px solid var(--color-primary);
    padding: 8px;
    border-radius: var(--border-radius-standard);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.rcd-p-social-btn:hover,
.rcd-p-social-btn:focus-visible {
    opacity: .85;
}
/* .rcd-p-wallet-btn {
    display: block;
    min-width: 200px;
} */

.rcd-p-wallet-btn img {
    width: 100%;
    max-width: 300px;
    object-fit: contain;
}

/* ---------- Footer line (.bottom-content) ---------- */
.rcd-p-footer {
    text-align: center;
    color: var(--neutral-grey);
    font-size: var(--small-main-content);
    padding: 30px 0 40px;
    margin: 0;
}

/* ---------- QR modal (ui-modal-overlay/ui-modal + canvas sizing) ---------- */
.rcd-p-qr-canvas {
    width: 232px;
    height: 232px;
    margin: 0 auto;
    display: block;
}
.rcd-p-qr-caption {
    color: var(--neutral-grey);
    margin: 14px 0 16px;
}

/* ---------- Exchange Contact modal (ui-modal + ui-form-group fields) ---------- */
.rcd-p-exchange-form {
    text-align: left;
}
/* Per-field validation error text (legacy .name__error etc. pattern) and the
   privacy note under the submit button. */
.rcd-p-field-error {
    display: none;
    margin: 6px 2px 0;
    color: var(--color-danger);
    font-size: var(--font-size-small);
}
.rcd-p-field-error.rcd-show {
    display: block;
}
.rcd-p-exchange-note {
    margin: 15px 0 0;
    font-size: var(--font-size-small);
    color: var(--neutral-grey);
}

/* ---------- Responsive (old theme mobile rules) ---------- */
@media (max-width: 520px) {
    .rcd-p-card {
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
    }
    .rcd-p-head {
        padding: 0 20px 20px;
    }
    .rcd-p-social,
    .rcd-p-details,
    .rcd-p-store-group,
    .rcd-p-wallet {
        padding: 20px;
    }
    .rcd-p-actions {
        flex-direction: column;
    }
}