/* landing-style.css */

:root {
    --primary-color: #2a6ec8;
    --secondary-color: #72b5fa;
    --accent-color: #ff7b00;
    --success-color: #4caf50;
    --warning-color: #f44336;
    --background-color: #f5f7fa;
    --text-color: #333;
    --light-gray: #e0e5ec;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* VEX IQ gear colors */
    --vex-orange: #FF7B00;
    --vex-blue: #0082C8;
    --vex-light-blue: #72B5FA;
    --vex-dark-blue: #005287;
    --vex-gray: #444444;
    
    /* New gear ratio colors */
    --reduction-light: #e1f5fe;
    --reduction-medium: #4fc3f7;
    --reduction-dark: #0288d1;
    --reduction-high: #0277bd;
    --reduction-max: #01579b;
    --multiplication-light: #fff3e0;
    --multiplication-medium: #ffb74d;
    --multiplication-dark: #f57c00;
    --multiplication-high: #ef6c00;
    --multiplication-max: #e65100;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    overflow: hidden; /* Ensures nothing breaks out of container */
}

header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 20px;
}

header h1 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 2.2rem;
}

header p {
    font-size: 1.1rem;
    color: #666;
}

.calculators {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.calculator-card {
    flex: 1;
    min-width: 280px;
    max-width: 450px;
    padding: 30px;
    border-radius: 10px;
    background-color: var(--background-color);
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.calculator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-icon {
    width: 100px; /* Set a fixed width */
    height: 100px; /* Set a fixed height */
    margin: 0 auto 20px; /* Center horizontally, add bottom margin */
    border-radius: 50%; /* Make it a circle */
    background-position: center;
    background-size: 60%; /* Adjust the size of the SVG within the circle */
    background-repeat: no-repeat;
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.simulator-icon {
    background-color: #4CAF50;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M487.4 315.7l-42.6-24.3c-4.3-2.5-9.8-1.5-13 2.6l-18.6 27.1c-5.3 7.8-13.9 11.7-22.1 9.3-6.3-1.7-12.8-3.9-19.5-6.6l-14.3-6.6c-4.4-2.1-7-6.8-6.1-11.6 2.3-12.7 9.1-24.1 19.1-32.8 5.7-5 12.5-8 19.5-9.3 8.1-2.3 16.7-.4 24.5 5.6l27.1 18.6c4.1 2.8 5.1 8.3 2.6 13l-24.3 42.6c-4.7 8.2-1.6 19.7 6.6 24.4l32 18.3c2.1 1.2 4.3 1.8 6.6 1.8 8.4 0 16.1-5.9 17.7-14.1l18.3-32c4.7-8.2 1.6-19.7-6.6-24.4zM433.8 129.8c-8.2-4.7-19.7-1.6-24.4 6.6l-42.6 24.3c-4.3 2.5-9.8 1.5-13-2.6l-18.6-27.1c-5.3-7.8-13.9-11.7-22.1-9.3-6.3 1.7-12.8 3.9-19.5 6.6l-14.3 6.6c-4.4 2.1-7 6.8-6.1-11.6 2.3-12.7 9.1 24.1 19.1 32.8 5.7 5 12.5 8 19.5 9.3 8.1 2.3 16.7.4 24.5-5.6l27.1-18.6c4.1-2.8 5.1-8.3 2.6-13l-24.3-42.6c-4.7-8.2-1.6-19.7 6.6-24.4l32-18.3c2.1-1.2 4.3-1.8 6.6-1.8 8.4 0 16.1-5.9 17.7-14.1l18.3-32c4.7-8.2 1.6-19.7-6.6-24.4zM256 112c-66.27 0-120 53.73-120 120s53.73 120 120 120 120-53.73 120-120-53.73-120-120-120zm0 224c-57.24 0-104-46.76-104-104s46.76-104 104-104 104 46.76 104 104-46.76 104-104 104z"/></svg>');
}

.basic-icon {
    background-color: var(--vex-blue);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-8 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm16 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-8-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.advanced-icon {

    background-color: #ff7b00; /* Orange for Multi-Gear Calculator */
    
    color: white;
    
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.63-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
    
    }
    
.drivetrain-icon {
    background-image: url("{{ url_for('static', filename='img/drivetrain-icon.svg') }}");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.calculator-card h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.calculator-card p {
    color: #555;
    margin-bottom: 25px;
    height: auto;
    min-height: 50px;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn.primary {
    background-color: var(--primary-color);
    color: white;
}

.btn.primary:hover {
    background-color: var(--vex-dark-blue);
    transform: scale(1.05);
}

.education-section {
    margin-top: 40px;
}

.education-section h2 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.education-card {
    background-color: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--primary-color);
}

.education-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.education-card p {
    margin-bottom: 15px;
}

.formula {
    background-color: var(--background-color);
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    margin: 15px 0;
}

/* Types of Gear Ratios */
.ratio-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.ratio-card {
    flex: 1;
    min-width: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ratio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ratio-card-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ratio-card-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.ratio-card-content {
    padding: 15px;
}

.ratio-card.reduction {
    background-color: var(--reduction-light);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.ratio-card.reduction .ratio-card-header {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.ratio-card.multiplication {
    background-color: var(--multiplication-light);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.ratio-card.multiplication .ratio-card-header {
    background-color: rgba(230, 126, 34, 0.15);
    color: #d35400;
}

/* Effects of Gear Ratios */
.effects-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.effects-card {
    flex: 1;
    min-width: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.effects-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.effects-card-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.effects-card-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.effects-card-content {
    padding: 15px;
}

.effect-property {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.effect-property:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.effect-label {
    flex: 0 0 100px;
    font-weight: bold;
    color: #555;
}

.effect-value {
    flex: 1;
}

.reduction-card {
    background-color: var(--reduction-light);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.reduction-card .effects-card-header {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.multiplication-card {
    background-color: var(--multiplication-light);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.multiplication-card .effects-card-header {
    background-color: rgba(230, 126, 34, 0.15);
    color: #d35400;
}

/* Common Gear Ratio Combinations */
.gear-ratio-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.gear-ratio-card {
    flex: 1;
    min-width: 280px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 15px;
}

.gear-ratio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.gear-ratio-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ratio-badge {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Card background and header colors */
.reduction-card {
    background-color: var(--reduction-light);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.reduction-card .gear-ratio-header {
    background-color: rgba(52, 152, 219, 0.15);
}

.reduction-card .ratio-badge {
    background: linear-gradient(135deg, var(--reduction-medium) 0%, var(--reduction-dark) 100%);
}

.reduction-card.high .ratio-badge {
    background: linear-gradient(135deg, var(--reduction-dark) 0%, var(--reduction-high) 100%);
}

.reduction-card.max .ratio-badge {
    background: linear-gradient(135deg, var(--reduction-high) 0%, var(--reduction-max) 100%);
}

.multiplication-card {
    background-color: var(--multiplication-light);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.multiplication-card .gear-ratio-header {
    background-color: rgba(230, 126, 34, 0.15);
}

.multiplication-card .ratio-badge {
    background: linear-gradient(135deg, var(--multiplication-medium) 0%, var(--multiplication-dark) 100%);
}

.multiplication-card.max .ratio-badge {
    background: linear-gradient(135deg, var(--multiplication-dark) 0%, var(--multiplication-max) 100%);
}

.gear-ratio-content {
    padding: 20px;
}

/* Gear visualization area */
.gear-combo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    min-height: 120px;
}

.gear-arrow {
    margin: 0 15px;
    font-size: 24px;
    color: #555;
}

/* Container for gear and its label */
.gear-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Style for the gear label */
.gear-label {
    margin-top: 8px;
    text-align: center;
    color: #000000;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Base gear style */
.gear {
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.gear:after {
    content: '';
    position: absolute;
    width: 40%;
    height: 40%;
    background-color: white;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 12-tooth gear is orange, others are blue */
.gear[data-teeth="12T"] {
    background-color: var(--vex-orange);
}

.gear:not([data-teeth="12T"]) {
    background-color: var(--vex-blue);
}

/* Proportional gear sizes based on tooth count */
.gear[data-teeth="12T"] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

.gear[data-teeth="24T"] {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
}

.gear[data-teeth="36T"] {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
}

.gear[data-teeth="48T"] {
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
}

.gear[data-teeth="60T"] {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
}

.gear-detail {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 15px;
}

.gear-detail-item {
    margin-bottom: 8px;
}

.gear-detail-item.usage {
    margin-top: 12px;
}

.gear-detail-item.usage p {
    margin-top: 4px;
    font-size: 0.95rem;
}

/* Gear rotation on hover */
.gear-ratio-card:hover .gear {
    transform: rotate(15deg);
}

/* Diagrams for Types of Gear Ratios */
.ratio-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    padding: 15px 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.arrow {
    margin: 0 15px;
    font-size: 24px;
    color: #555;
}

/* Table styles */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 15px 0;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.ratio-examples {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.ratio-examples th {
    background-color: var(--primary-color);
    color: white;
    padding: 12px;
    text-align: left;
    white-space: nowrap;
}

.ratio-examples td {
    padding: 12px;
    border-bottom: 1px solid var(--light-gray);
}

.ratio-examples tr:nth-child(even) {
    background-color: var(--background-color);
}

.ratio-examples tr td:nth-child(3) {
    font-weight: bold;
    color: var(--accent-color);
}

.up-arrow, .down-arrow {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.up-arrow {
    color: var(--success-color);
}

.down-arrow {
    color: var(--warning-color);
}

.compact-list {
    margin: 0;
    padding-left: 20px;
}

.compact-list li {
    margin-bottom: 4px;
}

/* Donation Container Styling */
.donation-container {
    margin: 40px auto;
    max-width: 500px;
}

.donation-inner {
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border: 1px solid rgba(230, 230, 230, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.donation-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.05);
}

.donation-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.coffee-cup {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
}

.donation-title {
    flex: 1;
}

.donation-title h3 {
    font-size: 24px;
    margin: 0 0 5px 0;
    color: #2c3e50;
}

.donation-title p {
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
}

.donation-amount {
    margin-bottom: 20px;
}

.donation-amount label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #34495e;
}

.amount-input {
    display: flex;
    align-items: center;
    max-width: 150px;
    position: relative;
}

.currency-symbol {
    position: absolute;
    left: 12px;
    font-weight: bold;
    color: #34495e;
    z-index: 1;
    pointer-events: none;
}

#donation-value {
    padding: 10px 10px 10px 25px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid #bdc3c7;
    width: 100%;
    transition: border-color 0.3s;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

#donation-value::-webkit-outer-spin-button,
#donation-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#donation-value:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

#paypal-button-container {
    margin: 20px 0;
}

.donation-footer {
    text-align: center;
    margin-top: 15px;
    color: #7f8c8d;
    font-size: 14px;
}

/* Thank You Message Styling */
.thank-you-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.thank-you-inner {
    background: white;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.thank-you-inner h3 {
    font-size: 24px;
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.thank-you-inner p {
    font-size: 16px;
    margin: 0 0 20px 0;
    color: #7f8c8d;
}

.close-thanks {
    background: #3498db;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-appearance: none;
    appearance: none;
}

.close-thanks:hover {
    background: #2980b9;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--light-gray);
    color: #777;
    font-size: 0.9rem;
}

/* Responsive design */
@media screen and (max-width: 1024px) {
    .container {
        padding: 20px;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    .education-section h2 {
        font-size: 1.6rem;
    }
    
    .gear-ratio-cards {
        justify-content: center;
    }
    
    .gear-ratio-card {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media screen and (max-width: 768px) {
    body {
        padding: 15px;
    }
    
    .container {
        padding: 15px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    header p {
        font-size: 1rem;
    }
    
    .calculators {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .calculator-card {
        width: 100%;
        max-width: none;
        padding: 20px;
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }
    
    .ratio-cards, .effects-cards, .gear-ratio-cards {
        flex-direction: column;
    }
    
    .ratio-card, .effects-card, .gear-ratio-card {
        min-width: 100%;
        margin-bottom: 15px;
    }
    
    .education-card {
        padding: 15px;
    }
    
    .education-card h3 {
        font-size: 1.3rem;
    }
    
    .btn {
        padding: 10px 20px;
        width: 100%;
        text-align: center;
    }
    
    .gear[data-teeth="12T"] {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    
    .gear[data-teeth="24T"] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    
    .gear[data-teeth="36T"] {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
    }
    
    .gear[data-teeth="48T"] {
        width: 76px;
        height: 76px;
        min-width: 76px;
        min-height: 76px;
    }
    
    .gear[data-teeth="60T"] {
        width: 88px;
        height: 88px;
        min-width: 88px;
        min-height: 88px;
    }
    
    .ratio-badge {
        font-size: 1.6rem;
        padding: 4px 12px;
    }
    
    .donation-inner {
        padding: 20px;
    }
    
    .coffee-cup {
        width: 50px;
        height: 50px;
    }
    
    .donation-title h3 {
        font-size: 20px;
    }
    
    .gear-label {
        font-size: 0.8rem;
    }
    
    .gear-combo {
        min-height: 130px;
    }
}

/* iPhone and similar small mobile devices */
@media screen and (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 12px;
        border-radius: 8px;
    }
    
    header {
        margin-bottom: 25px;
        padding-bottom: 15px;
    }
    
    header h1 {
        font-size: 1.6rem;
    }
    
    .education-section h2 {
        font-size: 1.4rem;
    }
    
    .education-card {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .education-card h3 {
        font-size: 1.2rem;
    }
    
    .formula {
        font-size: 0.9rem;
        padding: 12px;
    }
    
    .ratio-diagram {
        margin: 15px 0;
    }
    
    .gear[data-teeth="12T"] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
    
    .gear[data-teeth="24T"] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }
    
    .gear[data-teeth="36T"] {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
    }
    
    .gear[data-teeth="48T"] {
        width: 68px;
        height: 68px;
        min-width: 68px;
        min-height: 68px;
    }
    
    .gear[data-teeth="60T"] {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
    }
    
    .arrow, .gear-arrow {
        font-size: 20px;
        margin: 0 10px;
    }
    
    .ratio-card-header h4, .effects-card-header h4 {
        font-size: 1rem;
    }
    
    .ratio-examples th, .ratio-examples td {
        padding: 8px;
        font-size: 0.85rem;
    }
    
    .ratio-badge {
        font-size: 1.4rem;
        padding: 3px 10px;
    }
    
    .donation-header {
        flex-direction: column;
        text-align: center;
    }
    
    .coffee-cup {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .amount-input {
        max-width: 100%;
    }
    
    .thank-you-inner {
        padding: 20px;
    }
    
    .thank-you-inner h3 {
        font-size: 20px;
    }
    
    .thank-you-inner p {
        font-size: 14px;
    }
    
    .close-thanks {
        padding: 8px 20px;
        font-size: 14px;
        width: 100%;
    }
    
    .gear-label {
        font-size: 0.75rem;
    }
}

/* Additional optimizations for very small screens */
@media screen and (max-width: 350px) {
    header h1 {
        font-size: 1.4rem;
    }
    
    .calculator-card {
        padding: 15px;
    }
    
    .card-icon {
        width: 60px;
        height: 60px;
    }
    
    .calculator-card h2 {
        font-size: 1.2rem;
    }
    
    .effect-label {
        flex: 0 0 70px;
        font-size: 0.9rem;
    }
    
    .gear[data-teeth="12T"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }
    
    .gear[data-teeth="24T"] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .gear[data-teeth="36T"] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    
    .gear[data-teeth="48T"] {
        width: 60px;
        height: 60px;
        min-width: 60px;
        min-height: 60px;
    }
    
    .gear[data-teeth="60T"] {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
    }
    
    .ratio-badge {
        font-size: 1.2rem;
    }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    
    .thank-you-message {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Fix for iOS touch events */
@media (hover: none) {
    .calculator-card:hover,
    .ratio-card:hover,
    .effects-card:hover,
    .gear-ratio-card:hover,
    .donation-inner:hover {
        transform: none;
    }
    
    .btn.primary:active {
        background-color: var(--vex-dark-blue);
    }
    
    .close-thanks:active {
        background-color: #2980b9;
    }
}