/* =====================================================
   GENERAL
   ===================================================== */

body {
    font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================
   PERSONAL PAGE (index.html)
   ===================================================== */

#personalPage #about-header {
    color: #1e90ff;
}

#personalPage #hobbies-header {
    color: #ff7f50;
}

#personalPage #education-header {
    color: #32cd32;
}

/* Education list styles */
#personalPage .edu-college {
    font-weight: bold;
}

#personalPage .edu-highschool {
    font-style: italic;
}

#personalPage .edu-certificate {
    text-decoration: underline;
}

/* Link hover effect (ONLY personal page) */
#personalPage a {
    font-size: 100%;
    transition: font-size 0.25s ease;
}

#personalPage a:hover {
    font-size: 150%;
}


/* =====================================================
   CLASS PAGE (class.html)
   ===================================================== */

/* Table styling */
#classPage #schedule-table {
    border-collapse: collapse;
    width: 100%;
}

#classPage #schedule-table th,
#classPage #schedule-table td {
    text-align: center;
    padding: 8px;
    border: 1px solid black;
}

/* Header row color */
#classPage #schedule-table thead {
    background-color: #0000ff;
    color: white;
}

/* Row striping */
#classPage #schedule-table tbody tr:nth-child(odd) {
    background-color: #e6f2ff;
}

/* Holiday list formatting */
#classPage > ol {
    list-style-type: decimal;
}

#classPage > ol > li > ol {
    list-style-type: upper-alpha;
}


/* =====================================================
   ACCOUNT PAGE (account.html)
   ===================================================== */

/* Custom radio buttons (Majors) */
#accountPage .major-radio input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: grey;
    cursor: pointer;
}

#accountPage .major-radio input[type="radio"]:checked {
    background-color: green;
}

/* Custom checkboxes (Languages) */
#accountPage .lang-checkbox input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: grey;
    cursor: pointer;
}

#accountPage .lang-checkbox input[type="checkbox"]:checked {
    background-color: blue;
}


/* =====================================================
   PAYMENT PAGE (project3/index.html)
   ===================================================== */

/* Section header colors */
#shippingHeader {
    color: #1e90ff;
}

#billingHeader {
    color: #28a745;
}

#paymentHeader {
    color: #6f42c1;
}


/* Custom checkbox (Same as Shipping) */
.sameCheck input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: grey;
    cursor: pointer;
    vertical-align: middle;
}

.sameCheck input[type="checkbox"]:checked {
    background-color: blue;
}


/* Tooltip for CVV */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

.tooltiptext {
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 5px;

    position: absolute;
    top: 25px;
    left: 0;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}