@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --ink: #16281f;
    --primary: #0b6e4f;
    --primary-dark: #06301f;
    --primary-light: #14a878;
    --gold: #c99a2e;
    --gold-soft: #ecd8a3;
    --gold-dark: #8f6a1a;
    --gold-ink: #2b2107;
    --flag-red: #b3122a;
    --bg: #f6f5f0;
    --surface: #ffffff;
    --text: #16281f;
    --muted: #62695f;
    --border: #e3ddd0;
    --danger: #a3271b;
    --radius: 14px;
    --radius-doc: 8px;
    --shadow: 0 2px 14px rgba(6, 48, 31, 0.07);
    --shadow-hover: 0 16px 32px rgba(6, 48, 31, 0.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    font-family: 'Fraunces', 'Inter', serif;
    font-weight: 600;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 0.4em;
    color: var(--primary-dark);
}
h1 { font-size: clamp(1.6rem, 5vw, 2.85rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink); }

p { max-width: 68ch; }

a { color: var(--primary); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ---- */
.site-header {
    background: var(--primary-dark);
    color: #fff;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; gap: 20px; }
.logo {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.logo-img {
    height: 42px;
    width: auto;
    display: block;
}
.site-header nav { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.site-header nav a {
    color: #cfe3d8;
    text-decoration: none;
    margin-left: 22px;
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
.site-header nav a:hover { color: #fff; }
.site-header nav a.nav-signup {
    background: var(--gold);
    color: var(--gold-ink);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.site-header nav a.nav-signup:hover {
    color: var(--gold-ink);
    background: #d9ac3d;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(201, 154, 46, 0.35);
}

/* ---- Tenders dropdown (category menu) ---- */
.nav-dropdown { position: relative; margin-left: 22px; display: inline-block; }
.nav-dropdown-label {
    color: #cfe3d8;
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.nav-dropdown:hover .nav-dropdown-label,
.nav-dropdown:focus-within .nav-dropdown-label { color: #fff; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.2);
    min-width: 220px;
    padding: 8px 0;
    z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    color: var(--primary-dark) !important;
    margin-left: 0 !important;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.92rem;
}
.nav-dropdown-menu a:hover { background: #eef7f2; color: var(--primary) !important; }

/* Ethiopian tricolor ribbon -- the site's one recurring signature device.
   Used as the header thread here, and reused as a top-border accent on
   content cards elsewhere, so it reads as one deliberate motif rather
   than scattered decoration. */
.flag-stripe { height: 4px; display: flex; }
.flag-stripe span { flex: 1; }
.flag-stripe .g { background: var(--primary-light); }
.flag-stripe .y { background: var(--gold); }
.flag-stripe .r { background: var(--flag-red); }

main.container { padding: 40px 20px 72px; min-height: 60vh; }

/* ---- Hero ---- */
.hero {
    position: relative;
    background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 78%);
    color: #fff;
    padding: 52px 44px;
    border-radius: var(--radius);
    text-align: left;
    margin-bottom: 48px;
    overflow: hidden;
}
.hero::before {
    /* corner tick marks -- a quiet nod to the certificate / official-form
       register of the subject matter, not a literal seal or badge. */
    content: "";
    position: absolute;
    top: 20px; right: 24px;
    width: 34px; height: 34px;
    border-top: 2px solid rgba(255,255,255,0.5);
    border-right: 2px solid rgba(255,255,255,0.5);
}
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-light), var(--gold), var(--flag-red));
}
.hero h1 { margin-top: 0; color: #fff; max-width: 40ch; }
.hero .lang-block p { max-width: 52ch; color: rgba(255,255,255,0.92); font-size: clamp(0.85rem, 1.6vw, 1rem); font-weight: 400; }
.hero .btn-outline-light { margin-top: 8px; }

/* ---- eGP Guides section (homepage) ---- */
.egp-guides {
    background: #fff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-doc);
    padding: 30px 34px;
    margin-bottom: 48px;
    text-align: left;
}
.egp-guides h2 { margin-top: 0; }
.egp-guides > p { color: var(--muted); }
.guide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}
.guide-buttons .btn-outline { min-width: 240px; text-align: center; }
@media (max-width: 600px) {
    .guide-buttons { flex-direction: column; align-items: stretch; }
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border: 0;
    border-radius: 8px;
    background: var(--gold);
    color: var(--gold-ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--gold-dark);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(201, 154, 46, 0.4); background: #d9ac3d; }
.btn:active { transform: translateY(0); }
.btn.small { padding: 8px 15px; font-size: 0.85rem; box-shadow: 0 2px 0 var(--gold-dark); }
.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 2px 0 #6e1a12; }
.btn.danger:hover { box-shadow: 0 8px 16px rgba(163, 39, 27, 0.4); background: var(--danger); }

/* Secondary/browsing actions -- gold (.btn) is reserved for actual
   purchase steps (Sign Up to buy, Submit Payment). Everything that
   just navigates or previews uses one of these instead, so the real
   "spend money here" buttons stand out. */
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary-dark);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.btn-outline.small { padding: 7px 14px; font-size: 0.85rem; }

/* Same idea, for use on the dark green hero background where a green
   outline would disappear. */
.btn-outline-light {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-outline-light:hover { background: #fff; color: var(--primary-dark); transform: translateY(-2px); }

/* ---- Video cards ---- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 26px;
    margin-top: 22px;
}
.video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

/* Fixed 16:9 thumbnail frame -- keeps every card the same height
   regardless of the source image's actual dimensions, and adds a
   subtle play-button so it reads as "video" even before it loads. */
.video-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--primary-dark);
    overflow: hidden;
}
.video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.video-card:hover img { transform: scale(1.04); }
.video-card-thumb::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 46px; height: 46px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(6, 48, 31, 0.55);
    backdrop-filter: blur(1px);
    transition: background 0.18s ease, transform 0.18s ease;
}
.video-card-thumb::before {
    content: "";
    position: absolute;
    top: 50%; left: calc(50% + 3px);
    width: 0; height: 0;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
}
.video-card:hover .video-card-thumb::after { background: var(--primary); transform: translate(-50%, -50%) scale(1.08); }

.video-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.video-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card-title-link { text-decoration: none; color: var(--text); display: block; }
.video-card-body .lang-block { margin-bottom: 10px; }
.video-card-body .lang-block p,
.video-card-body .lang-block span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card-body .lang-text-am { font-size: 1.5rem; line-height: 1.4; }

/* Pushes price/button to the bottom so every card in a row lines up
   evenly even when titles/descriptions run different lengths. */
.video-card-footer { margin-top: auto; padding-top: 6px; }

.price { color: var(--primary); font-weight: 700; font-family: 'Fraunces', serif; font-size: 1.15rem; }
.video-card-body .btn.small { margin-top: 10px; display: inline-block; }

/* Discount pricing: badge + struck-through original price + the
   actual discounted price the customer will pay. */
.price-discounted { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.discount-badge {
    background: var(--flag-red);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
}
.price-original {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: line-through;
    text-decoration-color: var(--danger);
}
.price-final { color: var(--primary); font-weight: 700; }

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 12px 0;
}
.payment-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-doc);
    padding: 14px 18px;
}
.payment-option h3 { margin-top: 0; }
@media (max-width: 600px) {
    .payment-options { grid-template-columns: 1fr; }
}

.video-detail img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); }
.video-detail h1 { margin-bottom: 10px; }
.video-detail .price,
.video-detail .price-discounted { margin: 4px 0 16px; }

.video-player-wrap { margin: 18px 0; }
.onsite-player {
    width: 100%;
    max-height: 520px;
    background: #000;
    border-radius: var(--radius);
    display: block;
}
/* Hides the built-in download icon Chrome/Edge otherwise add to their
   video controls -- controlsList="nodownload" on the element covers
   most browsers, this covers the rest. Not a security boundary by
   itself (that's stream_video.php's job) -- just removes the obvious
   one-click "save video" affordance. */
.onsite-player::-webkit-media-controls-download-button { display: none !important; }
.onsite-player::-internal-media-controls-download-button { display: none !important; }

.video-card.owned { border-color: var(--primary); box-shadow: var(--shadow); }
.badge-owned {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 8px;
}

/* ---- Notices ---- */
.notice {
    padding: 15px 18px;
    border-radius: var(--radius-doc);
    background: #eef6f2;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-light);
    margin: 16px 0;
}
.notice.success { background: #e6f6ea; border-color: #b7e2c4; border-left-color: var(--primary); }
.notice.pending { background: #fbf3e0; border-color: #ecdba7; border-left-color: var(--gold); }
.notice.error { background: #fbebe8; border-color: #f0c4bc; border-left-color: var(--flag-red); color: var(--danger); }

.payment-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-light);
    border-radius: var(--radius-doc);
    padding: 24px;
    margin-top: 18px;
    box-shadow: var(--shadow);
}

.auth-form, .payment-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 420px;
}
.auth-form label, .payment-box form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.auth-form label.checkbox-label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.auth-form label.checkbox-label input { width: auto; }
.auth-form input, .auth-form textarea,
.payment-box input, .payment-box textarea,
.admin-nav ~ form input, form input[type=text], form input[type=email], form input[type=password], form input[type=number], form input[type=url], form textarea {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form input:focus, form textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(20, 168, 120, 0.15);
}

.orders-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--surface); border-radius: var(--radius-doc); overflow: hidden; box-shadow: var(--shadow); }
.orders-table th, .orders-table td { border: 1px solid var(--border); padding: 12px; text-align: left; font-size: 0.9rem; }
.orders-table th { background: var(--primary-dark); color: #fff; font-weight: 600; }
.orders-table tbody tr:nth-child(even) { background: #faf9f5; }

.status-pending { color: var(--gold-dark); font-weight: 600; }
.status-approved { color: var(--primary); font-weight: 600; }
.status-rejected { color: var(--danger); font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 22px 0; }
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-light);
    border-radius: var(--radius-doc);
    padding: 22px;
    text-align: left;
    box-shadow: var(--shadow);
}
.stat-card:nth-child(3n+2) { border-top-color: var(--gold); }
.stat-card:nth-child(3n+3) { border-top-color: var(--flag-red); }
.stat-card h2 { margin: 0 0 4px; color: var(--primary); font-size: 2rem; }

.admin-nav { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }

.site-footer { background: var(--primary-dark); color: #b9d3c6; padding: 26px 22px; text-align: center; font-size: 0.85rem; }
.site-footer p { margin: 4px 0; max-width: none; }

/* Bilingual content: English and Amharic each rendered as their own
   plain paragraph, one after the other -- the scale contrast between
   the two scripts is the page's one deliberate visual flourish. */
.lang-block { margin-bottom: 14px; }
.lang-text-am { font-family: "Noto Sans Ethiopic", "Nyala", sans-serif; font-size: 1.3rem; line-height: 1.55; }
.hero .lang-text-am { color: #fff; font-size: 1.6rem; }

/* Password field with a Show/Hide toggle button */
.password-field { display: flex; gap: 8px; align-items: stretch; }
.password-field input { flex: 1; }
.password-field .toggle-password {
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.password-field .toggle-password:hover { background: #eef6f2; }

/* Admin Mode bar shown to logged-in admins browsing the public site */
.admin-mode-bar {
    background: #14231b;
    color: #f2efe6;
    text-align: center;
    padding: 9px 12px;
    font-size: 0.85rem;
}
.admin-mode-bar a { color: var(--gold); margin-left: 10px; font-weight: 600; }

/* Payment proof upload / preview */
.payment-box .or-divider { text-align: center; font-weight: 700; color: var(--muted); margin: 4px 0; }
.screenshot-preview { max-width: 220px; border: 1px solid var(--border); border-radius: 6px; margin-top: 8px; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-outline:focus-visible, .btn-outline-light:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}