/* =========================================================
   COMPANY / INFO PAGES (About, Contact, Privacy, Terms, Refund)
   Loaded after exams.css, reuses its --tyt-* colour tokens.
========================================================= */

.info-hero{
    background:linear-gradient(135deg,var(--tyt-purple-dark) 0%, var(--tyt-purple) 100%);
    color:#fff;
    padding:60px 8% 70px;
}

.info-hero-content{
    max-width:820px;
}

.info-badge{
    display:inline-block;
    background:rgba(244,194,31,0.18);
    color:var(--tyt-gold);
    border:1px solid rgba(244,194,31,0.4);
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    margin-bottom:16px;
}

.info-hero h1{
    font-size:38px;
    line-height:1.25;
    margin:0 0 12px;
}

.info-hero p{
    font-size:15px;
    line-height:1.8;
    color:#ddd3f7;
    margin:0;
}

.info-page{
    max-width:1100px;
    margin:-35px auto 0;
    padding:0 5%;
    position:relative;
}

.info-card{
    background:var(--tyt-white);
    border:1px solid var(--tyt-border);
    border-radius:20px;
    box-shadow:var(--tyt-card-shadow);
    padding:36px 40px;
    margin-bottom:24px;
}

.info-card h2{
    font-size:20px;
    color:var(--tyt-purple-dark);
    margin:28px 0 10px;
}

.info-card h2:first-child{
    margin-top:0;
}

.info-card p,
.info-card li{
    font-size:14px;
    line-height:1.85;
    color:var(--tyt-subtext);
}

.info-card ul{
    padding-left:20px;
    margin:8px 0;
}

.info-card a{
    color:var(--tyt-purple);
    font-weight:500;
}

.info-updated{
    font-size:12px !important;
    color:#9a95ab !important;
    margin-top:0;
}

/* GRID OF SMALL CARDS (About values, Contact channels) */
.info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:24px;
}

.info-tile{
    background:var(--tyt-white);
    border:1px solid var(--tyt-border);
    border-radius:18px;
    box-shadow:var(--tyt-card-shadow);
    padding:24px;
}

.info-tile .tile-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--tyt-purple-soft);
    color:var(--tyt-purple);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
}

.info-tile h3{
    font-size:16px;
    margin:0 0 6px;
    color:var(--tyt-text);
}

.info-tile p,
.info-tile a{
    font-size:13px;
    line-height:1.7;
    color:var(--tyt-subtext);
    margin:0;
    text-decoration:none;
    word-break:break-word;
}

.info-tile a:hover{
    color:var(--tyt-purple);
}

/* CONTACT + FEEDBACK FORM */
.contact-layout{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:24px;
    align-items:start;
}

.form-tabs{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.form-tabs label{
    flex:1;
    text-align:center;
    padding:11px 14px;
    border:1px solid var(--tyt-border);
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    color:var(--tyt-subtext);
    cursor:pointer;
    transition:0.2s ease;
}

.form-tabs input{
    display:none;
}

.form-tabs input:checked + span{
    color:var(--tyt-purple);
}

.form-tabs label:has(input:checked){
    border-color:var(--tyt-purple);
    background:var(--tyt-purple-soft);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
}

.form-group label{
    font-size:13px;
    font-weight:600;
    color:var(--tyt-text);
}

.form-group input,
.form-group select,
.form-group textarea{
    font-family:inherit;
    font-size:14px;
    padding:12px 14px;
    border:1px solid var(--tyt-border);
    border-radius:12px;
    background:#fbfaff;
    color:var(--tyt-text);
    outline:none;
    transition:0.2s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:130px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--tyt-purple);
    box-shadow:0 0 0 3px rgba(91,23,214,0.12);
    background:#fff;
}

.rating-group{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:4px;
}

.rating-group input{
    display:none;
}

.rating-group label{
    font-size:28px;
    color:#d8d3e6;
    cursor:pointer;
    line-height:1;
}

.rating-group input:checked ~ label,
.rating-group label:hover,
.rating-group label:hover ~ label{
    color:var(--tyt-gold);
}

.hp-field{
    position:absolute;
    left:-9999px;
}

.submit-btn{
    font-family:inherit;
    background:var(--tyt-purple);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:13px 28px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s ease;
}

.submit-btn:hover{
    background:var(--tyt-purple-dark);
}

.form-alert{
    padding:13px 16px;
    border-radius:12px;
    font-size:14px;
    margin-bottom:18px;
}

.form-alert.success{
    background:#e8f8ee;
    color:#18794e;
    border:1px solid #bfe8cf;
}

.form-alert.error{
    background:#fdecec;
    color:#b42318;
    border:1px solid #f6c9c5;
}

.contact-side .info-tile{
    margin-bottom:16px;
}

@media (max-width:900px){
    .info-grid{
        grid-template-columns:1fr 1fr;
    }

    .contact-layout{
        grid-template-columns:1fr;
    }
}

@media (max-width:600px){
    .info-hero{
        padding:40px 6% 60px;
    }

    .info-hero h1{
        font-size:28px;
    }

    .info-card{
        padding:26px 22px;
    }

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

/* ── REFER & EARN (Public/refer.php) ── */
.refer-card [hidden] { display: none !important; }

.refer-link-row {
    display: flex;
    gap: 10px;
    margin: 18px 0 14px;
}

.refer-link-row input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid #e2d9f4;
    border-radius: 14px;
    background: #faf8ff;
    font-family: inherit;
    font-size: 14px;
    color: #342d4f;
    outline: none;
}

.refer-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0 20px;
    white-space: nowrap;
}

.refer-copy svg { width: 17px; height: 17px; }

.refer-share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.refer-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.refer-share-btn svg { width: 17px; height: 17px; }
.refer-share-btn.whatsapp { background: #25d366; }
.refer-share-btn.telegram { background: #229ed9; }
.refer-share-btn.more { background: #5b17d6; }
.refer-share-btn:hover { filter: brightness(1.06); }

.refer-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-weight: 600;
    color: #5b17d6;
    text-decoration: none;
}

.refer-login svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
    .refer-link-row { flex-direction: column; }
    .refer-copy { justify-content: center; padding: 12px 20px; }
}