/* ==========================================================================
   EcoBottle - Responsive.css
   Responsive styles for various screen sizes
   ========================================================================== */

/* Large Tablets and Small Desktops (max-width: 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 1rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* Header */
    .header-content {
        height: 70px;
    }
    
    .nav-desktop {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    /* Hero */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .hero-image {
        order: -1;
    }
    
    .bottle-svg {
        width: 200px;
        height: auto;
    }
    
    /* Sections */
    section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    /* Introduction */
    .intro-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* How It Works */
    .steps-container {
        flex-direction: column;
        gap: 2rem;
    }
    
    .step-connector {
        width: 3px;
        height: 60px;
        margin: -30px 0;
        transform: rotate(90deg);
    }
    
    .step-connector::after {
        right: auto;
        bottom: -8px;
        top: auto;
        transform: rotate(90deg);
    }
    
    /* Impact */
    .impact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .impact-visual {
        order: -1;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Login */
    .login-container {
        grid-template-columns: 1fr;
        margin: 1rem;
    }
    
    .login-illustration {
        display: none;
    }
    
    .login-box {
        padding: 2rem;
    }
    
    .demo-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* About Page */
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    .solution-item {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .solution-item.reverse {
        direction: ltr;
    }
    
    .impact-grid {
        grid-template-columns: 1fr;
    }
    
    .overcome-steps {
        grid-template-columns: 1fr;
    }
    
    /* Leaderboard */
    .leaderboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .leaderboard-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    .podium-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .podium-item {
        width: 100%;
        max-width: 300px;
    }
    
    .first-place {
        order: 1;
    }
    
    .second-place {
        order: 2;
    }
    
    .third-place {
        order: 3;
    }
    
    .rank-1 .rank-height,
    .rank-2 .rank-height,
    .rank-3 .rank-height {
        height: 80px;
    }
    
    .leaderboard-table {
        font-size: 0.875rem;
    }
    
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .your-rank-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rank-details {
        justify-content: space-around;
    }
    
    /* Account Page */
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }
    
    .btn-logout {
        position: static;
        align-self: flex-end;
    }
    
    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .progress-actions {
        flex-direction: column;
    }
    
    /* Ebook Page */
    .ebooks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Container */
    .container {
        padding: 0 1rem;
    }
    
    /* Header */
    .logo span {
        font-size: 1.25rem;
    }
    
    .logo svg {
        width: 30px;
        height: 30px;
    }
    
    /* Hero */
    .hero {
        min-height: 70vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-stats {
        gap: 0.75rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .bottle-svg {
        width: 150px;
    }
    
    /* Page Header */
    .page-title {
        font-size: 2rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    /* Sections */
    section {
        padding: 2rem 0;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-description {
        font-size: 1rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    /* CTA */
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Footer */
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .footer-section:first-child {
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-bottom {
        padding-top: 1.5rem;
    }
    
    /* Login */
    .login-title {
        font-size: 1.5rem;
    }
    
    .login-box {
        padding: 1.5rem;
    }
    
    .demo-list {
        grid-template-columns: 1fr;
    }
    
    /* Intro Cards */
    .intro-card {
        padding: 1.5rem;
    }
    
    .intro-card h3 {
        font-size: 1.25rem;
    }
    
    /* Problem Cards */
    .problem-card {
        padding: 1.5rem;
    }
    
    .stat-large {
        font-size: 2rem;
    }
    
    /* Solution */
    .solution-number {
        font-size: 2rem;
    }
    
    .solution-content h3 {
        font-size: 1.5rem;
    }
    
    /* Impact Detail Cards */
    .impact-detail-card {
        padding: 1.5rem;
    }
    
    .impact-detail-card h3 {
        font-size: 1.25rem;
    }
    
    .impact-stats {
        grid-template-columns: 1fr;
    }
    
    /* Leaderboard */
    .leaderboard-header {
        padding: 1.5rem;
    }
    
    .leaderboard-info h2 {
        font-size: 1.5rem;
    }
    
    .leaderboard-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-box {
        width: 100%;
    }
    
    .podium-trophy {
        width: 40px;
        height: 40px;
    }
    
    .podium-trophy svg {
        width: 40px;
        height: 40px;
    }
    
    .avatar-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .avatar-circle.large {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .podium-medal {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    
    .podium-info {
        padding: 1rem;
    }
    
    .podium-info h3 {
        font-size: 1rem;
    }
    
    .podium-stat .stat-number {
        font-size: 1.25rem;
    }
    
    .leaderboard-table-container {
        overflow-x: auto;
    }
    
    .leaderboard-table {
        min-width: 600px;
    }
    
    /* Account */
    .profile-header {
        padding: 1.5rem;
    }
    
    .profile-info h1 {
        font-size: 1.5rem;
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
    }
    
    .stat-content .stat-value {
        font-size: 1.5rem;
    }
    
    .quick-actions {
        padding: 1.5rem;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-section {
        padding: 1.5rem;
    }
    
    .activity-list {
        max-height: 300px;
    }
    
    .progress-card {
        padding: 1.5rem;
    }
    
    /* Ebook */
    .user-points-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .points-value {
        font-size: 1.5rem;
    }
    
    .category-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .ebooks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .ebook-cover {
        height: 200px;
    }
    
    .ebook-icon {
        font-size: 4rem;
    }
    
    .ebook-info {
        padding: 1rem;
    }
    
    .ebook-info h3 {
        font-size: 1rem;
    }
    
    /* Notifications */
    .notification-container {
        top: 80px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        padding: 0.875rem 1rem;
    }
}

/* Mobile Landscape and Small Tablets (max-width: 640px) */
@media (max-width: 640px) {
    /* Hero */
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    /* Steps */
    .step-content {
        padding: 1rem;
    }
    
    .step-content h3 {
        font-size: 1.125rem;
    }
    
    /* Overcome Steps */
    .overcome-step {
        padding: 1.5rem;
    }
    
    .step-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Your Rank */
    .rank-position .rank-number {
        font-size: 2rem;
    }
    
    .rank-stat .rank-value {
        font-size: 1.25rem;
    }
    
    /* Ebook Grid */
    .ebooks-grid {
        grid-template-columns: 1fr;
    }
    
    .ebook-card {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    /* Header */
    .header-content {
        height: 60px;
    }
    
    .logo span {
        font-size: 1.125rem;
    }
    
    .logo svg {
        width: 25px;
        height: 25px;
    }
    
    /* Hero */
    .hero {
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-description {
        font-size: 0.875rem;
    }
    
    .stat-number {
        font-size: 1.25rem;
    }
    
    .bottle-svg {
        width: 120px;
    }
    
    /* Page Header */
    .page-header {
        padding: 2rem 0 1.5rem;
    }
    
    .page-title {
        font-size: 1.75rem;
    }
    
    .page-subtitle {
        font-size: 0.875rem;
    }
    
    /* Sections */
    section {
        padding: 1.5rem 0;
    }
    
    .section-header {
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-description {
        font-size: 0.875rem;
    }
    
    .section-tag {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Intro Cards */
    .intro-card {
        padding: 1.25rem;
    }
    
    .intro-icon svg {
        width: 50px;
        height: 50px;
    }
    
    .intro-card h3 {
        font-size: 1.125rem;
    }
    
    /* Steps */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .step-icon svg {
        width: 60px;
        height: 60px;
    }
    
    .step-content h3 {
        font-size: 1rem;
    }
    
    .step-content p {
        font-size: 0.875rem;
    }
    
    /* Impact */
    .impact-check svg {
        width: 20px;
        height: 20px;
    }
    
    .impact-item h4 {
        font-size: 1rem;
    }
    
    .impact-item p {
        font-size: 0.8125rem;
    }
    
    .impact-card {
        padding: 2rem 1.5rem;
    }
    
    .impact-icon-large svg {
        width: 80px;
        height: 80px;
    }
    
    /* CTA */
    .cta {
        padding: 2rem 0;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    .cta-content p {
        font-size: 0.875rem;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-logo {
        font-size: 1.25rem;
    }
    
    .footer-logo svg {
        width: 30px;
        height: 30px;
    }
    
    .footer-title {
        font-size: 1rem;
    }
    
    .footer-bottom {
        font-size: 0.75rem;
    }
    
    .footer-bottom-links {
        gap: 1rem;
        font-size: 0.75rem;
    }
    
    /* Login */
    .login-page {
        align-items: flex-start;
        padding-top: 2rem;
    }
    
    .login-container {
        margin: 0.5rem;
    }
    
    .logo-login svg {
        width: 50px;
        height: 50px;
    }
    
    .login-title {
        font-size: 1.25rem;
    }
    
    .login-subtitle {
        font-size: 0.8125rem;
    }
    
    .login-box {
        padding: 1.25rem;
    }
    
    .form-group label {
        font-size: 0.8125rem;
    }
    
    .input-wrapper input {
        padding: 0.625rem 1rem 0.625rem 2.75rem;
        font-size: 0.875rem;
    }
    
    .btn-login {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Problem Cards */
    .problem-card {
        padding: 1.25rem;
    }
    
    .problem-icon svg {
        width: 50px;
        height: 50px;
    }
    
    .problem-card h3 {
        font-size: 1.125rem;
    }
    
    .stat-large {
        font-size: 1.75rem;
    }
    
    /* Solution */
    .solution-number {
        font-size: 2.5rem;
    }
    
    .solution-content h3 {
        font-size: 1.25rem;
    }
    
    .solution-content p {
        font-size: 0.875rem;
    }
    
    .visual-card {
        padding: 1.5rem;
    }
    
    .points-icon {
        font-size: 3rem;
    }
    
    .ebook-item {
        width: 50px;
        height: 70px;
    }
    
    /* Impact Details */
    .impact-detail-card {
        padding: 1.25rem;
    }
    
    .impact-detail-card h3 {
        font-size: 1.125rem;
    }
    
    .impact-stat-item {
        padding: 0.75rem;
    }
    
    .impact-stat-item .stat-value {
        font-size: 1.25rem;
    }
    
    /* Overcome */
    .overcome-step {
        padding: 1.25rem;
    }
    
    .step-icon-circle svg {
        width: 35px;
        height: 35px;
    }
    
    .step-header h3 {
        font-size: 1.125rem;
    }
    
    /* Leaderboard */
    .leaderboard-header {
        padding: 1.25rem;
    }
    
    .leaderboard-info h2 {
        font-size: 1.25rem;
    }
    
    .leaderboard-info p {
        font-size: 0.8125rem;
    }
    
    .stat-box {
        padding: 0.875rem 1rem;
    }
    
    .stat-box .stat-value {
        font-size: 1.25rem;
    }
    
    .podium-container {
        padding: 2rem 0;
    }
    
    .podium-trophy {
        top: -50px;
    }
    
    .avatar-circle {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .avatar-circle.large {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }
    
    .podium-medal {
        width: 25px;
        height: 25px;
        font-size: 0.625rem;
        bottom: -5px;
        right: -5px;
    }
    
    .podium-info {
        padding: 0.875rem;
        min-width: 180px;
    }
    
    .podium-info h3 {
        font-size: 0.875rem;
    }
    
    .podium-nisn {
        font-size: 0.625rem;
    }
    
    .podium-stat .stat-number {
        font-size: 1.125rem;
    }
    
    .podium-stat .stat-text {
        font-size: 0.625rem;
    }
    
    .rank-1 .rank-height,
    .rank-2 .rank-height,
    .rank-3 .rank-height {
        height: 60px;
    }
    
    .leaderboard-table {
        font-size: 0.75rem;
    }
    
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .your-rank-card {
        padding: 1.25rem;
    }
    
    .rank-badge {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .rank-position .rank-number {
        font-size: 1.75rem;
    }
    
    .rank-stat .rank-value {
        font-size: 1.125rem;
    }
    
    .rank-label {
        font-size: 0.625rem;
    }
    
    /* Account */
    .profile-header {
        padding: 1.25rem;
    }
    
    .profile-info h1 {
        font-size: 1.25rem;
    }
    
    .profile-nisn {
        font-size: 0.8125rem;
    }
    
    .badge {
        padding: 0.2rem 0.625rem;
        font-size: 0.625rem;
    }
    
    .btn-logout {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .profile-stats {
        padding: 1.25rem;
    }
    
    .stat-card {
        padding: 0.875rem;
    }
    
    .stat-icon {
        width: 45px;
        height: 45px;
    }
    
    .stat-icon svg {
        width: 25px;
        height: 25px;
    }
    
    .stat-content .stat-value {
        font-size: 1.25rem;
    }
    
    .stat-content .stat-label {
        font-size: 0.75rem;
    }
    
    .quick-actions {
        padding: 1.25rem;
    }
    
    .quick-actions h2 {
        font-size: 1.25rem;
    }
    
    .action-btn {
        padding: 1.25rem 0.875rem;
    }
    
    .action-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .action-btn span {
        font-size: 0.875rem;
    }
    
    .action-btn p {
        font-size: 0.625rem;
    }
    
    .activity-section {
        padding: 1.25rem;
    }
    
    .activity-section h2 {
        font-size: 1.25rem;
    }
    
    .activity-list {
        max-height: 250px;
    }
    
    .activity-item {
        padding: 0.875rem;
    }
    
    .activity-icon {
        width: 35px;
        height: 35px;
    }
    
    .activity-details h4 {
        font-size: 0.8125rem;
    }
    
    .activity-details p {
        font-size: 0.625rem;
    }
    
    .progress-card {
        padding: 1.25rem;
    }
    
    .progress-card h3 {
        font-size: 1.125rem;
    }
    
    .progress-bar {
        height: 25px;
    }
    
    .progress-text {
        font-size: 0.875rem;
    }
    
    /* Ebook */
    .user-points-card {
        padding: 1.25rem;
    }
    
    .points-label {
        font-size: 0.875rem;
    }
    
    .points-value {
        font-size: 1.25rem;
    }
    
    .category-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .filter-btn {
        white-space: nowrap;
    }
    
    .ebook-cover {
        height: 180px;
    }
    
    .ebook-icon {
        font-size: 3rem;
    }
    
    .ebook-info {
        padding: 0.875rem;
    }
    
    .ebook-info h3 {
        font-size: 0.875rem;
    }
    
    .ebook-author {
        font-size: 0.75rem;
    }
    
    .ebook-category {
        font-size: 0.625rem;
        padding: 0.2rem 0.5rem;
    }
    
    .price-tag {
        font-size: 1rem;
    }
    
    .btn-redeem {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Notifications */
    .notification {
        padding: 0.75rem;
    }
    
    .notification-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .notification-content h4 {
        font-size: 0.8125rem;
    }
    
    .notification-content p {
        font-size: 0.625rem;
    }
}

/* Extra Small Devices (max-width: 360px) */
@media (max-width: 360px) {
    html {
        font-size: 12px;
    }
    
    .container {
        padding: 0 0.75rem;
    }
    
    .hero-title {
        font-size: 1.375rem;
    }
    
    .section-title {
        font-size: 1.375rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 0.5rem 0.875rem;
    }
    
    .profile-stats,
    .actions-grid {
        gap: 0.75rem;
    }
    
    .ebook-cover {
        height: 160px;
    }
    
    .ebook-icon {
        font-size: 2.5rem;
    }
}

/* Tablet Landscape (orientation-specific) */
@media (max-width: 1024px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
    }
    
    .login-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .login-illustration {
        display: flex;
    }
}

/* Print Styles */
@media print {
    .header,
    .hamburger,
    .mobile-menu,
    .footer,
    .btn,
    .notification-container {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    section {
        page-break-inside: avoid;
    }
    
    .container {
        max-width: 100%;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --background-light: #1f2937;
        --background-gray: #374151;
        --text-dark: #f9fafb;
        --text-gray: #d1d5db;
        --text-light: #9ca3af;
        --border-color: #4b5563;
        --secondary-white: #111827;
    }
    
    .header {
        background: #1f2937;
    }
    
    .ebook-card,
    .problem-card,
    .intro-card,
    .impact-detail-card,
    .overcome-step,
    .profile-card,
    .quick-actions,
    .activity-section,
    .progress-card,
    .user-points-card,
    .leaderboard-table-container,
    .your-rank-card,
    .leaderboard-header {
        background: #374151;
    }
    
    .stat-card,
    .action-btn,
    .activity-item,
    .podium-info {
        background: #4b5563;
    }
    */
}