/* ==========================================================================
   PLANVIGO – Frontend Responsive Styles
   Mobile-first overrides for all frontend pages.
   Loaded after all other stylesheets so it can override safely.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MAX-WIDTH 1024px — Tablets landscape / small laptops
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* --- Premium page: slider items 2-up --- */
    .slider-item {
        width: calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
    }

    /* --- Premium options: 2-up --- */
    .premium-options {
        flex-wrap: wrap;
    }
    .premium-option {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
        min-width: 260px;
        height: auto;
    }

    /* --- Dashboard stats --- */
    .stats-wrapper {
        margin-left: 40px;
        margin-right: 40px;
    }
    .stat-number {
        font-size: 5rem;
    }

    /* --- Footer --- */
    .quick-links {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   MAX-WIDTH 768px — Tablets portrait / large phones
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Page title overlay --- */
    .simple-overlay {
        margin: 20px 0 20px 5px;
    }
    .small-text {
        font-size: 32px !important;
    }
    .small-text::before {
        width: 7px;
        height: 36px;
    }

    /* --- Dashboard stats: vertical stack --- */
    .dashboard-stats {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }
    .stats-container {
        flex-direction: column;
        height: auto;
        padding: 1.5rem 1rem;
    }
    .stats-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
    .stat-number {
        font-size: 4rem;
    }

    /* --- Footer: stack vertically --- */
    .planvigo-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
        padding: 2rem 1rem;
    }
    .planvigo-footer figure {
        max-width: 280px;
    }
    .quick-links {
        width: auto;
        margin-left: 0;
        align-items: center;
    }
    .contact-info {
        width: auto;
        align-items: center;
    }
    .contact-info ul {
        align-items: center;
    }

    /* --- Premium slider: 1-up --- */
    .slider-item {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 300px;
    }
    .slider-item i {
        font-size: 60px !important;
        margin-bottom: 10%;
        margin-right: 0;
    }
    .slider-item h3 {
        font-size: 24px;
    }

    /* --- Premium options: 1-up --- */
    .premium-options {
        flex-direction: column;
        align-items: center;
    }
    .premium-option {
        flex: 0 0 100%;
        max-width: 400px;
        width: 100%;
        min-width: unset;
        height: auto;
    }

    /* --- Highlight text --- */
    .highlight-text {
        font-size: 1.3rem;
    }
    .highlight-text .highlight,
    .highlight-text .highlight-green,
    .highlight-text .highlight-blue,
    .highlight-text .highlight-orange {
        font-size: 2rem;
    }
    .highlight-text-small {
        font-size: 24px;
    }
    .highlight-text-small .highlight,
    .highlight-text-small .highlight-green,
    .highlight-text-small .highlight-blue,
    .highlight-text-small .highlight-orange,
    .highlight-text-small .highlight-purple,
    .highlight-text-small .highlight-teal {
        font-size: 2rem;
    }

    /* --- Premium headline --- */
    .premium-small-text {
        font-size: clamp(50px, 12vw, 100px);
    }

    /* --- Buy section --- */
    .buy-section {
        padding: 20px 10px;
        margin: 30px auto 40px;
    }

    /* --- Slider nav arrows smaller --- */
    .slider-nav {
        width: 40px;
        height: 40px;
    }

    /* --- Acceptance modal: remove min-width --- */
    .acceptance-modal-content {
        min-width: unset !important;
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 16px !important;
    }

    /* --- Week calendar in acceptance modal: horizontal scroll --- */
    .modal-week-calendar {
        max-width: 100%;
    }
    .modal-week-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-week-header {
        min-width: 500px;
    }
    .modal-week-grid {
        min-width: 500px;
    }

    /* --- Profile modal responsive --- */
    .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
    }
    .modal-header {
        padding: 16px 20px 12px;
    }
    .modal-header h2 {
        font-size: 1.2rem;
    }
    .modal-body {
        padding: 16px;
    }
    .modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    /* --- Dashboard header top --- */
    .dashboard-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* --- Grids to single column --- */
    .pv-grid-2 {
        grid-template-columns: 1fr !important;
    }
    .widgets-row {
        grid-template-columns: 1fr !important;
    }

    /* --- Season info row --- */
    .season-info-row {
        flex-direction: column;
        gap: 10px;
    }

    /* --- Planning container --- */
    .planning-container {
        flex-direction: column;
    }
    .planning-container-left {
        min-width: unset;
    }

    /* --- Trainer groups grid --- */
    .trainer-groups-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Season cards grid --- */
    .season-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Calendar toolbar --- */
    .cp-cal-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }
    .cp-cal-view {
        justify-content: center;
    }
    .cp-cal-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* --- Calendar event modal --- */
    #eventModal,
    #playerModal,
    #trainerModal,
    #courtModal {
        max-width: 95vw !important;
        width: 95vw !important;
        padding: 16px !important;
    }

    /* --- Table responsive on frontend --- */
    .pv-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Registration page --- */
    .registration-container {
        padding: 25px;
        margin: 0 10px;
    }
    .registration-form-card {
        padding: 5px;
    }

    /* --- Old login/player form tables --- */
    .planvigo_container .form-table th,
    .planvigo_container .form-table td {
        display: block;
        width: 100%;
    }
    .planvigo_container .form-table th {
        padding-bottom: 4px;
    }
    .planvigo_container .form-table td {
        padding-bottom: 12px;
    }
    .planvigo_container .form-table input[type="text"],
    .planvigo_container .form-table input[type="date"],
    .planvigo_container .form-table input[type="number"],
    .planvigo_container .form-table input[type="password"],
    .planvigo_container .form-table select {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Player calendar modal key-value grid --- */
    .cp-modal-kv {
        grid-template-columns: 110px 1fr;
    }

    /* --- Success overlay responsive --- */
    .pv-success-content {
        min-width: unset !important;
        width: 90vw;
        padding: 30px 20px 20px;
    }
    .pv-success-title {
        font-size: 1.5rem;
    }
    .pv-success-message {
        font-size: 1rem;
    }

    /* --- Selection cards smaller --- */
    .select-card {
        width: 120px;
        height: 120px;
    }
    .select-card i {
        font-size: 3rem !important;
        margin-top: 15px !important;
    }

    /* --- Acceptance modal buttons stack --- */
    .acceptance-modal-buttons {
        flex-direction: column;
    }
    .acceptance-modal-buttons .btn {
        width: 100%;
    }

    /* --- Strength slider row --- */
    .acceptance-modal-strength-slider-row {
        flex-wrap: wrap;
    }
    .acceptance-modal-strength-label-end {
        min-width: 40px;
        font-size: 0.75em;
    }

    /* --- Profile strength slider --- */
    .profile-strength-container {
        flex-direction: column;
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   MAX-WIDTH 600px — Medium phones
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

    /* --- Container padding reduction --- */
    .pv-container {
        padding: 0 10px;
    }
    .pv-card {
        padding: 18px;
    }

    /* --- Widget cards spacing --- */
    .widget-card {
        padding: 20px;
    }

    /* --- Strength widget --- */
    .strength-widget-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .strength-widget-display {
        width: 100%;
        justify-content: center;
    }
    .strength-widget-value {
        font-size: 2rem;
    }

    /* --- Calendar week view: tighter grid --- */
    .cp-cal-week-header,
    .cp-cal-week-grid {
        grid-template-columns: 45px repeat(7, 1fr);
    }
    .cp-cal-time-slot {
        font-size: 10px;
        padding: 4px 2px;
    }
    .cp-cal-week-dayhead {
        padding: 8px 2px;
        min-height: 48px;
    }
    .cp-cal-week-daynum {
        font-size: 1.1rem;
    }
    .cp-cal-week-dayname {
        font-size: 9px;
    }
    .cp-cal-event {
        font-size: 8px;
        padding: 2px 3px;
    }

    /* --- Calendar day view --- */
    .cp-cal-day-schedule {
        grid-template-columns: 50px 1fr;
    }
    .cp-cal-day-datebig {
        font-size: 1.5em;
    }
    .cp-cal-day-namebig {
        font-size: 0.9em;
    }

    /* --- Calendar title --- */
    .cp-cal-title {
        min-width: 140px;
        font-size: 0.95rem;
    }

    /* --- Button min-width reduction --- */
    .btn {
        min-width: 90px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    /* --- Next training card header --- */
    .widget-card .pv-card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    /* --- Acceptance modal even tighter --- */
    .acceptance-modal-content {
        padding: 12px !important;
    }
    .acceptance-modal-title {
        font-size: 1.1rem;
    }
    .acceptance-modal-info-box {
        font-size: 0.85em;
        padding: 10px 12px;
    }

    /* --- Table font size --- */
    .planvigo_container .form-table th {
        font-size: 0.9rem;
    }

    /* --- Dashboard stat numbers --- */
    .stat-number {
        font-size: 3rem;
    }
    .stats-wrapper h3 {
        font-size: 0.9rem;
    }

    /* --- Modal section title --- */
    .modal-section-title {
        font-size: 0.95rem;
    }

    /* --- Premium headline --- */
    .premium-small-text {
        font-size: clamp(36px, 14vw, 60px);
    }

    /* --- Selection container --- */
    .select-container {
        gap: 20px;
    }
    .select-card {
        width: 110px;
        height: 110px;
    }
    .select-card i {
        font-size: 2.5rem !important;
    }
    .select-card-label {
        font-size: 0.35em;
    }

    /* --- Player registration page welcoming text --- */
    .player-registration-page .small-text {
        font-size: 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   MAX-WIDTH 480px — Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* --- Page title --- */
    .small-text {
        font-size: 24px !important;
        gap: 10px;
    }
    .small-text::before {
        width: 5px;
        height: 28px;
    }

    /* --- Container --- */
    .pv-container {
        padding: 0 8px;
    }
    .pv-card {
        padding: 14px;
        border-radius: 10px;
    }

    /* --- Widget card --- */
    .widget-card {
        padding: 16px;
        border-radius: 10px;
    }
    .widgets-row {
        gap: 16px;
    }

    /* --- Section title --- */
    .pv-section-title {
        font-size: 1.1rem;
    }

    /* --- Calendar toolbar buttons --- */
    .cp-cal-toolbar .btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    /* --- Calendar week: remove time column on very small screens --- */
    .cp-cal-week-header,
    .cp-cal-week-grid {
        grid-template-columns: 36px repeat(7, 1fr);
    }
    .cp-cal-time-slot {
        font-size: 8px;
        padding: 3px 1px;
    }
    .cp-cal-week-cell {
        padding: 2px;
        min-height: 45px;
    }

    /* --- Calendar wrap height --- */
    .cp-cal-weekwrap,
    .cp-cal-daywrap {
        height: calc(100vh - 320px);
    }

    /* --- Day view time column --- */
    .cp-cal-day-schedule {
        grid-template-columns: 40px 1fr;
    }
    .cp-cal-day-time {
        font-size: 10px;
        padding: 6px 2px;
    }

    /* --- Buttons: no min-width --- */
    .btn {
        min-width: unset;
    }

    /* --- Dashboard header --- */
    .dashboard-header-top > div:first-child span {
        font-size: 1rem;
    }
    .profile-badge {
        font-size: 0.7rem;
        padding: 3px 10px;
        margin-left: 8px;
    }
    .user-greeting {
        font-size: 0.85rem;
    }

    /* --- Next training items --- */
    .next-training-label-text {
        font-size: 0.75em;
    }
    .next-training-value {
        font-size: 0.85em;
    }

    /* --- Footer --- */
    .planvigo-footer {
        padding: 1.5rem 0.75rem;
        gap: 1.5rem;
    }
    .planvigo-footer figcaption {
        font-size: 1rem;
    }
    .planvigo-footer h3 {
        font-size: 1.2rem;
    }

    /* --- Strength description --- */
    .strength-description {
        padding: 10px 12px;
    }
    .strength-description p {
        font-size: 0.85rem;
    }

    /* --- Registration --- */
    .registration-container {
        padding: 16px;
        border-radius: 12px;
    }

    /* --- Success overlay --- */
    .pv-success-content {
        padding: 24px 16px 16px;
    }
    .pv-success-title {
        font-size: 1.3rem;
    }
    .pv-success-checkmark {
        width: 70px;
        height: 70px;
    }
    .checkmark {
        width: 70px;
        height: 70px;
    }

    /* --- Premium options spacing --- */
    .premium-option {
        padding: 20px 15px;
        border-radius: 14px;
    }
    .option-content li {
        font-size: 15px;
        padding: 10px 0;
    }
    .option-header h3 {
        font-size: 1.2rem;
    }
    .price {
        font-size: 2rem;
    }

    /* --- Acceptance modal week calendar: stacked view --- */
    .modal-week-header {
        min-width: 420px;
    }
    .modal-week-grid {
        min-width: 420px;
    }
    .modal-week-cell {
        min-height: 50px;
        padding: 6px;
    }
    .modal-time-slot {
        min-height: 50px;
        font-size: 0.7em;
        padding: 8px 4px;
    }

    /* --- Modal key-value grid --- */
    .cp-modal-kv {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .cp-modal-kv .k {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* --- Planning action buttons --- */
    .planning-container-actions {
        flex-direction: column;
        width: 100%;
    }
    .planning-container-actions .btn {
        width: 100%;
    }

    /* --- Season card items --- */
    .season-card-item {
        padding: 14px;
    }
    .season-card-item h3 {
        font-size: 1rem;
    }

    /* --- Trainer group cards --- */
    .trainer-group-card {
        padding: 16px;
    }

    /* --- Login link in old form --- */
    #login {
        margin-left: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   MAX-WIDTH 360px — Very small phones
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {

    .small-text {
        font-size: 20px !important;
    }

    .pv-container {
        padding: 0 6px;
    }
    .pv-card {
        padding: 12px;
    }

    /* --- Calendar: even more compact --- */
    .cp-cal-week-header,
    .cp-cal-week-grid {
        grid-template-columns: 30px repeat(7, 1fr);
    }
    .cp-cal-time-slot {
        font-size: 7px;
    }
    .cp-cal-event {
        font-size: 7px;
        padding: 1px 2px;
    }

    /* --- Calendar day --- */
    .cp-cal-day-schedule {
        grid-template-columns: 34px 1fr;
    }

    /* --- Buttons --- */
    .btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* --- Selection cards --- */
    .select-container {
        gap: 15px;
    }
    .select-card {
        width: 100px;
        height: 100px;
    }

    /* --- Footer --- */
    .planvigo-footer {
        padding: 1rem 0.5rem;
    }

    /* --- Premium headline --- */
    .premium-small-text {
        font-size: clamp(28px, 16vw, 50px);
    }
}

/* --------------------------------------------------------------------------
   Touch device improvements
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

    /* --- Bigger touch targets --- */
    .btn {
        min-height: 44px;
    }

    /* --- Calendar cells: easier to tap --- */
    .modal-week-cell {
        min-height: 48px;
    }

    /* --- Weekly calendar cells --- */
    .cp-cal-week-cell {
        min-height: 48px;
    }

    /* --- Disable hover transforms on touch --- */
    .select-card:hover {
        transform: none;
    }
    .season-card-item:hover {
        transform: none;
    }
    .btn-primary:hover {
        transform: none;
    }
    .premium-option:hover {
        transform: none;
    }
    .select-option:hover {
        transform: none;
    }
    .slider-nav:hover {
        transform: translateY(-50%) scale(1);
    }
}

/* --------------------------------------------------------------------------
   Landscape phone adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 850px) and (orientation: landscape) {
    .cp-cal-weekwrap,
    .cp-cal-daywrap {
        height: calc(100vh - 200px);
    }
    .acceptance-modal-content {
        max-height: 95vh !important;
    }
}