/* BJIKS Color Scheme - Same as index.php */
        :root {
          --navy: #002147;
          --navy-dark: #001630;
          --navy-mid: #003070;
          --gold: #D4AF37;
          --gold-light: #F0D078;
          --gold-pale: #FAF3D3;
          --gold-dark: #A8880F;
          --off-white: #F8F6F0;
          --light-grey: #F2F0EA;
          --border: #E4DFC8;
          --text-dark: #1A1A1A;
          --text-mid: #555;
          --text-light: #888;
          --white: #fff;
          --serif: 'Playfair Display', Georgia, serif;
          --sans: 'DM Sans', system-ui, sans-serif;
          --crimson: 'Crimson Text', Georgia, serif;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        /* Container class for footer compatibility */
        .container{max-width:1060px;margin:0 auto;padding:0 24px;}
        
        /* Footer styles moved to footer.php */

        /* Register Form Styles - Updated to match BJIKS theme */
        body {
          font-family: var(--sans);
          background: var(--off-white);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
        }

        .main-content {
          flex: 1;
          padding: 40px 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }



        .registration-container {

          background: var(--white);

          border: 1px solid var(--border);

          border-radius: 12px;

          box-shadow: 0 4px 24px rgba(0,33,71,.10);

          width: 100%;

          max-width: 680px;

          padding: 40px;

        }



        .registration-header {

          text-align: center;

          margin-bottom: 32px;

        }



        .registration-title {

          font-family: var(--serif);

          font-size: 32px;

          font-weight: 700;

          color: var(--navy);

          margin-bottom: 8px;

        }



        .registration-subtitle {

          font-size: 14px;

          color: var(--text-mid);

          margin-bottom: 24px;

        }



      /* ─── Header ─── */

      .site-header {

        text-align: center;

        margin-bottom: 32px;

        animation: fadeDown 0.6s ease both;

      }

      .site-header .journal-name {

        font-family: 'Playfair Display', serif;

        font-size: clamp(22px, 5vw, 34px);

        color: var(--primary);

        letter-spacing: -0.5px;

      }

      .site-header .sub-name {

        font-size: 12px;

        color: var(--muted);

        text-transform: uppercase;

        letter-spacing: 2px;

        margin-top: 4px;

      }

      .header-divider {

        width: 60px; height: 3px;

        background: linear-gradient(90deg, var(--accent), var(--accent2));

        border-radius: 99px;

        margin: 12px auto 0;

      }



      /* ─── Card ─── */

      .card {

        background: var(--surface);

        border: 1px solid var(--border);

        border-radius: 16px;

        box-shadow: var(--shadow);

        width: 100%;

        max-width: 680px;

        padding: clamp(24px, 5vw, 48px);

        animation: fadeUp 0.6s ease 0.1s both;

      }



      .card-title {

        font-family: 'Playfair Display', serif;

        font-size: 22px;

        color: var(--primary);

        margin-bottom: 6px;

      }

      .card-subtitle {

        font-size: 13px;

        color: var(--muted);

        margin-bottom: 28px;

      }



      /* ─── Role Selector ─── */

      .role-selector {

        display: flex;

        gap: 12px;

        margin-bottom: 32px;

        flex-wrap: wrap;

      }

      .role-btn {

        flex: 1;

        min-width: 140px;

        padding: 14px 10px;

        border: 2px solid var(--border);

        border-radius: var(--radius);

        background: var(--bg);

        cursor: pointer;

        text-align: center;

        transition: all 0.22s ease;

        outline: none;

      }

      .role-btn .role-icon { font-size: 26px; display: block; margin-bottom: 6px; }

      .role-btn .role-label { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.3px; }

      .role-btn .role-desc { font-size: 11px; color: var(--muted); margin-top: 3px; }

      .role-btn:hover { border-color: var(--accent); background: #fdf8f2; }

      .role-btn.active {

        border-color: var(--primary);

        background: #edf4ef;

        box-shadow: 0 0 0 3px rgba(26,58,42,0.10);

      }

      .role-btn.active .role-label { color: var(--primary); }



      /* ─── Section Label ─── */

      .section-label {

        font-size: 11px;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: 1.5px;

        color: var(--accent2);

        margin: 28px 0 14px;

        padding-bottom: 6px;

        border-bottom: 1px solid var(--border);

      }



      /* ─── Grid & Fields ─── */

      .form-grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;

      }

      .form-grid .span-full { grid-column: 1 / -1; }



      .field { display: flex; flex-direction: column; gap: 5px; }

      .field label {

        font-size: 12px;

        font-weight: 600;

        color: var(--muted);

        text-transform: uppercase;

        letter-spacing: 0.6px;

      }

      .field label .req { color: var(--error); margin-left: 2px; }



      .field input,

      .field select,

      .field textarea {

        padding: 11px 13px;

        border: 1.5px solid var(--border);

        border-radius: var(--radius);

        font-family: 'DM Sans', sans-serif;

        font-size: 14px;

        color: var(--text);

        background: #fafaf8;

        transition: border-color 0.18s, box-shadow 0.18s;

        outline: none;

        width: 100%;

      }

      .field input:focus,

      .field select:focus,

      .field textarea:focus {

        border-color: var(--primary);

        box-shadow: 0 0 0 3px rgba(26,58,42,0.08);

        background: #fff;

      }

      .field input.invalid { border-color: var(--error); }

      .field .hint {

        font-size: 11px;

        color: var(--muted);

        margin-top: 2px;

      }

      .field .err-msg {

        font-size: 11px;

        color: var(--error);

        display: none;

        margin-top: 2px;

      }



      /* password toggle */

      .pw-wrap { position: relative; }

      .pw-wrap input { padding-right: 40px; }

      .pw-toggle {

        position: absolute; right: 11px; top: 50%;

        transform: translateY(-50%);

        background: none; border: none; cursor: pointer;

        color: var(--muted); font-size: 15px; line-height: 1;

        padding: 2px;

      }



      /* ─── Privacy Checkbox ─── */

      .privacy-row {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        margin-top: 26px;

        padding: 14px;

        background: #f9f6f0;

        border: 1px solid var(--border);

        border-radius: var(--radius);

      }

      .privacy-row input[type="checkbox"] {

        width: 17px; height: 17px;

        accent-color: var(--primary);

        margin-top: 2px;

        flex-shrink: 0;

        cursor: pointer;

      }

      .privacy-row label {

        font-size: 12.5px;

        color: var(--muted);

        cursor: pointer;

        line-height: 1.6;

      }

      .privacy-row label a { color: var(--primary); text-decoration: underline; }



      /* ─── Submit Button ─── */

      .btn-submit {

        margin-top: 28px;

        width: 100%;

        padding: 15px;

        background: var(--gold);

        font-family: 'DM Sans', sans-serif;

        font-size: 15px;

        font-weight: 600;

        letter-spacing: 0.5px;

        border: none;

        border-radius: var(--radius);

        cursor: pointer;

        transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;

        box-shadow: 0 4px 18px rgba(212,175,55,0.3);

        color: var(--navy);

      }

      .btn-submit:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,0.4); }

      .btn-submit:active { transform: translateY(0); color: black; }

      .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }



      /* ─── Login Link ─── */

      .login-link {

        text-align: center;

        margin-top: 20px;

        font-size: 13px;

        color: var(--muted);

        animation: fadeUp 0.6s ease 0.25s both;

      }

      .login-link a { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; }



      /* ─── Success Banner ─── */

      .success-banner {

        display: none;

        background: #eaf6ef;

        border: 1.5px solid #7bca9d;

        border-radius: var(--radius);

        padding: 16px 20px;

        color: var(--success);

        font-size: 14px;

        font-weight: 500;

        margin-bottom: 24px;

        align-items: center;

        gap: 10px;

      }



      /* ─── Transitions for section reveal ─── */

      .form-section {

        transition: all 0.35s ease;

      }

      .hidden-section {

        display: none;

      }



      /* ─── Animations ─── */

      @keyframes fadeDown {

        from { opacity: 0; transform: translateY(-16px); }

        to   { opacity: 1; transform: translateY(0); }

      }

      @keyframes fadeUp {

        from { opacity: 0; transform: translateY(16px); }

        to   { opacity: 1; transform: translateY(0); }

      }

      @keyframes spin {

        0% { transform: rotate(0deg); }

        100% { transform: rotate(360deg); }

      }



      /* ─── Responsive ─── */

      @media (max-width: 520px) {

        .form-grid { grid-template-columns: 1fr; }

        .form-grid .span-full { grid-column: 1; }

        .role-btn { min-width: 100%; }

      }