/* Ys Comindo Service - Mobile Perfect V2
   Aman untuk live: hanya CSS, tidak mengubah login, route, controller, atau database.
   Tujuan: tampilan HP lebih compact, tulisan lebih kecil, form Pesan Service lebih ringan.
   Upload ke: public_html/public/mobile-perfect.css
*/

@media (max-width: 768px) {
    html {
        font-size: 12.5px !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        font-size: 12.5px !important;
        line-height: 1.42 !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    h1,
    .h1,
    .headline,
    .hero-title {
        font-size: 23px !important;
        line-height: 1.14 !important;
        letter-spacing: -0.45px !important;
    }

    h2,
    .h2,
    .section-title h2,
    .page-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    h3,
    .h3,
    .card-title,
    .panel-title {
        font-size: 15px !important;
        line-height: 1.22 !important;
    }

    h4,
    h5,
    h6 {
        font-size: 13px !important;
        line-height: 1.22 !important;
    }

    p,
    span,
    small,
    li,
    label,
    a,
    button,
    td,
    th {
        font-size: 11.5px !important;
    }

    .text-xl,
    .text-2xl,
    .text-3xl,
    .text-4xl,
    .text-5xl,
    .text-6xl {
        font-size: 20px !important;
        line-height: 1.16 !important;
    }

    .container,
    .wrapper,
    .section,
    main,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .section {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    .grid,
    .hero-grid,
    .form-grid,
    .footer-grid,
    .stats-grid,
    .dashboard-grid,
    .service-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .card,
    .premium-card,
    .form-card,
    .mini-card,
    .stat-card,
    .panel,
    .box {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .number,
    .stat-number,
    .summary-number,
    .amount,
    .price {
        font-size: 17px !important;
        line-height: 1.15 !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-warning,
    .btn-danger,
    .btn-success,
    button,
    input[type="submit"] {
        min-height: 35px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        touch-action: manipulation !important;
    }

    input,
    select,
    textarea,
    .mock-input {
        font-size: 14px !important;
        min-height: 37px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    textarea,
    textarea.mock-input {
        min-height: 78px !important;
    }

    label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }

    .mock-field,
    .form-group,
    .input-group {
        margin-bottom: 8px !important;
    }

    table,
    .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    table th,
    table td,
    .table th,
    .table td {
        padding: 6px !important;
        font-size: 10.5px !important;
    }

    .badge,
    .status,
    .label,
    .pill {
        font-size: 10px !important;
        padding: 4px 7px !important;
        border-radius: 999px !important;
    }

    .header,
    .navbar,
    .topbar {
        padding: 8px 10px !important;
    }

    .brand strong,
    .brand-name {
        font-size: 13px !important;
    }

    .brand small,
    .brand-subtitle {
        font-size: 9.5px !important;
    }

    .brand-mark,
    .logo-box {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    .nav,
    .menu,
    .actions {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .nav a,
    .menu a {
        font-size: 10.5px !important;
        padding: 6px 7px !important;
    }

    .mobile-bottom-nav {
        height: 58px !important;
        padding: 5px 4px !important;
    }

    .mobile-bottom-nav a {
        font-size: 9.5px !important;
        line-height: 1.1 !important;
    }

    .mobile-bottom-icon {
        font-size: 16px !important;
    }

    .wa-float,
    .floating-whatsapp {
        right: 10px !important;
        bottom: 72px !important;
        padding: 8px 10px !important;
        font-size: 10.5px !important;
        border-radius: 999px !important;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    .modal,
    .modal-content {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .invoice,
    .paper,
    .print-area {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}

/* PESAN SERVICE / BOOKING AC - Compact khusus HP */
@media (max-width: 768px) {
    .order-mockup-section {
        padding: 14px 0 26px !important;
    }

    .order-phone {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 36px rgba(15, 23, 42, .12) !important;
        overflow: hidden !important;
    }

    .order-appbar {
        height: 58px !important;
        padding: 0 12px !important;
    }

    .order-back,
    .order-shield {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
    }

    .order-brand {
        font-size: 17px !important;
        letter-spacing: .05em !important;
    }

    .order-brand small {
        font-size: 8.5px !important;
        letter-spacing: .18em !important;
        margin-top: 4px !important;
    }

    .order-brand small::before,
    .order-brand small::after {
        width: 18px !important;
        margin: 0 5px 2px !important;
    }

    .order-stepper {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        padding: 12px 10px 4px !important;
    }

    .order-step {
        gap: 4px !important;
        font-size: 9.5px !important;
    }

    .order-step b {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .order-step::before {
        top: 14px !important;
    }

    .order-body {
        padding: 14px 12px 0 !important;
    }

    .order-title {
        font-size: 23px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 6px !important;
    }

    .order-subtitle {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 6px 0 14px !important;
    }

    .mock-label {
        font-size: 13px !important;
        margin: 13px 0 8px !important;
    }

    .mock-card,
    .package-list,
    .option-list,
    .summary-card,
    .calendar-card,
    .map-card {
        border-radius: 14px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
    }

    .category-list {
        gap: 8px !important;
    }

    .category-card {
        grid-template-columns: 48px 1fr auto !important;
        gap: 9px !important;
        padding: 8px 9px !important;
        border-radius: 14px !important;
    }

    .category-thumb {
        width: 48px !important;
        height: 44px !important;
        border-radius: 11px !important;
        font-size: 20px !important;
    }

    .category-card h3 {
        font-size: 13.5px !important;
        margin-bottom: 2px !important;
    }

    .category-card p {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .mock-add {
        padding: 7px 9px !important;
        border-radius: 10px !important;
        font-size: 10.5px !important;
    }

    .package-card {
        grid-template-columns: 44px 1fr auto !important;
        gap: 9px !important;
        padding: 10px 9px !important;
    }

    .package-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .package-card h3 {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .package-card p {
        font-size: 10.5px !important;
        margin-top: 2px !important;
        line-height: 1.25 !important;
    }

    .package-price {
        font-size: 12px !important;
    }

    .package-check {
        width: 28px !important;
        height: 28px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .qty-box {
        gap: 8px !important;
    }

    .qty-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        font-size: 17px !important;
    }

    .option-row {
        grid-template-columns: 34px 1fr auto !important;
        gap: 8px !important;
        padding: 10px 9px !important;
    }

    .option-row input {
        width: 18px !important;
        height: 18px !important;
    }

    .option-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    .option-row strong {
        font-size: 12.5px !important;
    }

    .option-row small,
    .option-price {
        font-size: 10.5px !important;
    }

    .field-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mock-field {
        position: relative !important;
        overflow: visible !important;
        margin-bottom: 7px !important;
    }

    .mock-field label {
        font-size: 11px !important;
        margin: 0 0 4px !important;
        font-weight: 700 !important;
    }

    .mock-input {
        font-size: 14px !important;
        min-height: 38px !important;
        border-radius: 11px !important;
        padding: 8px 10px 8px 34px !important;
        line-height: 1.32 !important;
        position: relative !important;
        z-index: 2 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .mock-field textarea.mock-input {
        min-height: 82px !important;
        padding-top: 9px !important;
    }

    .field-icon {
        left: 11px !important;
        top: 32px !important;
        font-size: 14px !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    .time-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .time-chip span {
        padding: 9px 6px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .calendar-card {
        padding: 12px !important;
    }

    .calendar-head {
        margin-bottom: 10px !important;
    }

    .calendar-head strong {
        font-size: 14px !important;
    }

    .cal-grid {
        gap: 5px !important;
    }

    .cal-day-name {
        font-size: 10px !important;
        padding: 4px 0 !important;
    }

    .cal-day {
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .map-card {
        grid-template-columns: 1fr !important;
        margin-top: 10px !important;
    }

    .mini-map {
        min-height: 135px !important;
    }

    .map-side {
        padding: 11px !important;
    }

    .map-side strong {
        font-size: 13px !important;
    }

    .mock-btn {
        min-height: 35px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .review-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .review-item {
        padding: 10px !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    .review-item i {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .review-item small {
        font-size: 10px !important;
    }

    .review-item strong {
        font-size: 12px !important;
    }

    .summary-card {
        padding: 10px !important;
        margin-top: 10px !important;
    }

    .summary-row {
        padding: 7px 0 !important;
    }

    .summary-row span,
    .summary-row strong {
        font-size: 11.5px !important;
    }

    .summary-row.total span,
    .summary-row.total strong {
        font-size: 13px !important;
    }

    .payment-grid,
    .voucher-pills {
        gap: 7px !important;
    }

    .payment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pay-chip span,
    .voucher-pills button {
        padding: 9px 7px !important;
        border-radius: 10px !important;
        font-size: 10.5px !important;
    }

    .term-box {
        padding: 9px !important;
        border-radius: 11px !important;
        gap: 7px !important;
    }

    .info-strip {
        padding: 9px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .info-strip strong {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .info-strip span {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    .bottom-nav {
        gap: 8px !important;
        padding: 10px 0 14px !important;
    }

    .bottom-nav .mock-btn {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }

    /* Jika ada input upload gambar di form Pesan Service, sembunyikan secara visual.
       Foto pekerjaan tetap dilakukan oleh teknisi, bukan pelanggan saat order. */
    .order-phone input[type="file"],
    .order-phone .upload-field,
    .order-phone .photo-upload,
    .order-phone .image-upload {
        display: none !important;
    }

    .order-phone,
    .order-body,
    .order-slide,
    .field-grid,
    .mock-field {
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
}

@media (max-width: 420px) {
    html {
        font-size: 12px !important;
    }

    h1,
    .hero h1,
    .hero-title,
    .headline {
        font-size: 21px !important;
    }

    h2 {
        font-size: 17px !important;
    }

    h3 {
        font-size: 14px !important;
    }

    .card,
    .premium-card,
    .form-card,
    .panel {
        padding: 10px !important;
    }

    .order-title {
        font-size: 21px !important;
    }

    .order-phone {
        width: calc(100% - 10px) !important;
        border-radius: 18px !important;
    }

    .order-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .order-step {
        font-size: 8.5px !important;
    }

    .order-step b {
        width: 25px !important;
        height: 25px !important;
        font-size: 11px !important;
    }

    .package-card {
        grid-template-columns: 38px 1fr auto !important;
        gap: 7px !important;
        padding: 9px 8px !important;
    }

    .package-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .package-card h3 {
        font-size: 12.5px !important;
    }

    .package-price {
        font-size: 11px !important;
    }

    .mock-input {
        font-size: 14px !important;
        min-height: 36px !important;
    }

    .payment-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
/* HOTFIX Notifikasi HP - deskripsi tidak terpotong */
@media (max-width: 768px) {
    .notification-card,
    .notification-item,
    .notif-card,
    .notif-item,
    .alert,
    .toast,
    .message-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .notification-card p,
    .notification-card span,
    .notification-card div,
    .notification-item p,
    .notification-item span,
    .notification-item div,
    .notif-card p,
    .notif-card span,
    .notif-card div,
    .notif-item p,
    .notif-item span,
    .notif-item div,
    .notification-description,
    .notif-description,
    .notification-message,
    .notif-message {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .notification-title,
    .notif-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    .notification-time,
    .notif-time {
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    .notification-list,
    .notif-list,
    .dropdown-notifications {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}