/* === Base Styles === */
    body {
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #e0ecf7; /* A more noticeable light blue tint for the background */
      color: #333;
      display: flex; /* Make body a flex container */
      align-items: center;
      justify-content: center;
      min-height: 100vh; /* Ensure body takes full viewport height */
      margin: 0;
      padding: 15px; /* Slightly reduced overall body padding */
      box-sizing: border-box;
      overflow-y: auto; /* Allow scrolling if content overflows vertically */
    }

    /* === Main Container for Cards === */
    .main-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px; /* Adjusted gap slightly */
      max-width: 1720px; /* Keep consistent with original request for non-scrollable width */
      width: 100%;
      flex-grow: 1; /* Allow the main container to grow within the body's flex context */
    }

    /* === Card Base Styles === */
    .card {
      background: #fff;
      padding: 2.5rem; /* Adjusted padding slightly */
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      /* flex-basis: px; */
      flex-grow: 1;
      max-width: 30%;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-sizing: border-box;
      min-width: 350px;
      align-self: stretch; /* Make cards stretch to same height */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #d4e0eb; /* A subtle, light blue border for definition */
    }

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

    /* === Logo Styles === */
    .card img.logo {
      max-width: 250px; /* Slightly smaller logo to save vertical space */
      /* margin-bottom: 1.8rem; Adjusted margin */
      align-self: center;
    }

    /* === Headings === */
    .card h2, #logs h3 {
      font-size: 1.7rem; /* Adjusted heading size */
      color: #2d3f50; /* Dark blue from logo */
      font-weight: 800; /* Extra bold heading */
      margin-bottom: 0.7rem; /* Adjusted margin */
    }
    #logs h3 { /* Specific adjustments for logs heading */
        font-size: 2rem; /* Adjusted logs heading size */
        margin-bottom: 1.5rem; /* Adjusted margin */
        margin-top: 0;
    }

    /* === Paragraph Text === */
    .card p {
      font-size: 1rem; /* Adjusted paragraph size */
      margin-bottom: 2rem; /* Adjusted margin */
      color: #4a4a4a; /* Darker grey for better readability */
      line-height: 1.5; /* Adjusted line height */
    }



    /* === Input Group Styles === */
    .input-group {
      margin-bottom: 1.3rem; /* Adjusted margin */
      text-align: left;
    }

    .input-group label {
      display: block;
      margin-bottom: 0.6rem;
      font-size: 1rem; /* Adjusted label size */
      color: #2d3f50; /* Dark blue for labels */
      font-weight: 600;
    }

    .input-group input {
      width: 100%;
      padding: 0.9rem 1.1rem; /* Adjusted padding */
      border: 1px solid #a3b1c6; /* Stronger, more defined border for inputs */
      border-radius: 10px;
      font-size: 1.05rem; /* Adjusted input font size */
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      box-sizing: border-box;
    }

    .input-group input:focus {
      outline: none;
      border-color: #ff8c42; /* Vibrant orange highlight on focus */
      box-shadow: 0 0 0 5px rgba(255, 140, 66, 0.35); /* More prominent glow on focus */
    }

    /* === Buttons === */
    .btn {
      width: 100%;
      padding: 1rem; /* Adjusted padding */
      background: #2d3f50; /* Dark blue from logo */
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 1.15rem; /* Adjusted font size */
      cursor: pointer;
      margin-bottom: 1rem; /* Adjusted margin */
      transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      font-weight: 700;
      letter-spacing: 0.8px; /* Adjusted letter spacing */
      box-shadow: 0 5px 15px rgba(45, 63, 80, 0.3); /* Stronger shadow for buttons */
    }

    .btn:hover:not(:disabled) {
      background: #1f2d3d; /* Darker blue on hover */
      transform: translateY(-3px); /* More noticeable lift on hover */
      box-shadow: 0 8px 20px rgba(45, 63, 80, 0.4); /* Stronger shadow on hover */
    }

    .btn:disabled {
      background: #6a7c8f; /* Slightly darker disabled state from blue palette */
      cursor: not-allowed;
      opacity: 0.6;
      box-shadow: none;
    }

    /* === OTP Inputs === */
    .otp-inputs {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.8rem; /* Adjusted margin */
      gap: 12px; /* Adjusted gap */
    }

    .otp-inputs input {
      width: 36px; /* Slightly smaller OTP input boxes */
      height: 40px; /* Adjusted height */
      font-size: 1.5rem; /* Adjusted font size */
      text-align: center;
      border: 2px solid #a3b1c6; /* Thicker, more defined border for OTP inputs */
      border-radius: 10px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .otp-inputs input:focus {
      outline: none;
      border-color: #ff8c42; /* Vibrant orange highlight */
      box-shadow: 0 0 0 5px rgba(255, 140, 66, 0.35);
    }

    /* === Links === */
    .link {
      font-size: 0.95rem; /* Adjusted font size */
      color: #ff8c42; /* Vibrant orange from logo */
      cursor: pointer;
      text-decoration: none;
      transition: color 0.3s ease, text-decoration 0.3s ease;
      font-weight: 600;
    }

    .link:hover {
      text-decoration: underline;
      color: #e07b36; /* Darker orange on hover */
    }

    /* === Status Messages === */
    .status {
      font-size: 1rem; /* Adjusted font size */
      min-height: 1.4rem;
      margin-top: 1rem; /* Adjusted margin */
      font-weight: 600;
    }

    .status:has(span[style*="✅"]) {
      color: #28a745; /* Standard vibrant green */
    }
    .status:not(:has(span[style*="✅"])) {
      color: #dc3545; /* Standard vibrant red for errors */
    }


    /* === Logs Section Styles === */
    #logs {
      flex-basis: 850px;
      flex-grow: 1;
      max-width: 95%;
      background: #fff;
      padding: 2.5rem; /* Consistent padding with OTP card */
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      box-sizing: border-box;
      min-width: 320px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      /* Removed border from #logs here, it's now on .table-container */
    }
    #logs > * {
      margin-bottom: 1.2rem; /* Adjusted margin */
    }
    #logs > *:last-child {
      margin-bottom: 0;
    }


    /* === Logs Filter Section === */
    #logs .filter {
      margin-bottom: 1.5rem; /* Adjusted margin */
      display: flex;
      gap: 15px; /* Adjusted gap */
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 10px 12px; /* Adjusted padding */
      background-color: #f0f7fe; /* More vibrant light blue background for filter section */
      border-radius: 10px;
      border: 1px solid #cfe2f3;
    }

    #logs .filter label {
        font-weight: 600;
        color: #2d3f50;
    }

    #logs .filter input,
    #logs .filter select,
    #logs .filter button {
      padding: 8px 13px; /* Adjusted padding */
      font-size: 1rem; /* Adjusted font size */
      border-radius: 8px;
      border: 1px solid #a3b1c6;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    #logs .filter input:focus,
    #logs .filter select:focus {
      outline: none;
      border-color: #ff8c42;
      box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.25);
    }

    #logs .filter button {
      background: #ff8c42; /* Vibrant orange for filter button */
      color: #fff;
      cursor: pointer;
      border: none;
      font-weight: 700;
      transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow: 0 3px 8px rgba(255, 140, 66, 0.3);
    }

    #logs .filter button:hover {
      background: #e07b36; /* Darker orange on hover */
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(255, 140, 66, 0.4);
    }

    /* NEW: Wrapper for the table to handle vertical scrolling and allow sticky header */
    .table-container {
      flex-grow: 1; /* Allow container to take available vertical space */
      overflow-y: auto; /* Enable vertical scrolling for the entire table content */
      /* Adjust this calc() value if the page still scrolls or tbody is too small/large */
      max-height: calc(120vh - 480px); /* This value is an estimate; fine-tune for your exact layout */
      border-radius: 12px; /* Apply border radius to the container */
      border: 1px solid #c9d8e7; /* Apply overall border to container */
    }

    #logs table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 0.95rem;
      /* Removed border-radius and border from here, as they are on .table-container */
      /* Removed display: flex; flex-direction: column; from table */
      table-layout: fixed; /* Crucial for fixed column widths */
      min-width: 950px; /* Adjust this value: sum of your desired column widths */
    }

    /* Remove display: block from thead and tbody */
    #logs table thead {
        /* Revert to default display for thead */
    }

    #logs table tbody {
        /* Revert to default display for tbody */
    }

    /* IMPORTANT: Set fixed widths for TH and TD to ensure alignment */
    #logs th,
    #logs td {
      border-bottom: 1px solid #e0ecf7;
      border-right: 1px solid #e0ecf7;
      padding: 14px 18px;
      text-align: left;
      white-space: wrap;
      text-align: center;
      /* overflow: hidden; */
      /* text-overflow: ellipsis; */
      /* box-sizing: border-box; */
    }



    #logs th:last-child, #logs td:last-child {
        border-right: none;
    }

    /* Define explicit widths for each column - FINE-TUNE THESE VALUES! */
    /* Make sure these sum up to the min-width of the table (or slightly less if horizontal scroll is desired) */
    #logs th:nth-child(1), #logs td:nth-child(1) { width: 100px; } /* Time */
    #logs th:nth-child(2), #logs td:nth-child(2) { width: 120px; text-transform: uppercase; } /* Phone */
    #logs th:nth-child(3), #logs td:nth-child(3) { width: 100px; } /* Name */
    #logs th:nth-child(4), #logs td:nth-child(4) { width: 80px; }  /* Type */
    #logs th:nth-child(5), #logs td:nth-child(5) { width: 100px; } /* Status */
    #logs th:nth-child(6), #logs td:nth-child(6) { width: 100px; } /* Details */
    #logs th:nth-child(7), #logs td:nth-child(7) { width: 370px; text-align: left; } /* Details */


    #logs th {
      background: #dceefc;
      font-weight: 700;
      color: #2d3f50;
      position: sticky; /* Make TH elements sticky */
      top: 0; /* Stick to the top of their scrollable container (.table-container) */
      z-index: 2; /* Higher z-index to be above tbody content */
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for sticky effect */
      text-align: center;
      border-right: 1px solid #c5cfd7;
    border-bottom: 1px solid #c5cfd7;
    }

    #logs tbody tr:nth-child(even) {
      background-color: #f7fcff;
    }

    #logs tbody tr:hover {
      background-color: #c5cfd7;
      cursor: pointer;
    }

    /* === Preformatted Text (Details Column) === */
    #logs pre {
      margin: 0;
      white-space: pre-wrap; /* Allows content to wrap within the fixed width */
      word-wrap: break-word; /* Ensures long words break */
      max-height: 6em; /* Slightly reduced height for pre tag */
      overflow: auto;
      background: #e6f0fa;
      padding: 9px; /* Adjusted padding */
      border-radius: 8px;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
      font-size: 0.88em;
      color: #3b424d;
      border: 1px solid #cce0f0;
    }

    /* === Pagination === */
    #pagination {
      margin-top: 1.5rem; /* Adjusted margin */
      text-align: center;
    }

    #pagination button {
      margin: 0 8px; /* Adjusted margin */
      padding: 9px 16px; /* Adjusted padding */
      font-size: 1rem; /* Adjusted font size */
      border: 1px solid #a3b1c6;
      border-radius: 8px;
      cursor: pointer;
      background: #fff;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      font-weight: 600;
      color: #2d3f50; /* Dark blue text for inactive pagination buttons */
    }

    #pagination button:hover:not(:disabled) {
      background: #f0f7fe;
      border-color: #7b9cc0;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    #pagination button:disabled {
      background: #e9ecef;
      cursor: not-allowed;
      color: #888;
    }

    #pagination button.active {
      background: #ff8c42; /* Vibrant orange for active pagination button */
      color: #fff;
      border-color: #ff8c42;
      box-shadow: 0 4px 10px rgba(255, 140, 66, 0.4); /* Active button shadow */
    }

    /* === Media Queries for Responsiveness === */
    @media (max-width: 992px) {
        .main-container {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        .card, #logs {
            flex-basis: auto;
            width: 100%;
            max-width: 500px;
            min-width: unset;
            align-self: auto;
        }

        .table-container {
            max-height: 350px; /* Adjusted max-height for smaller screens */
        }
    }

    @media (max-width: 600px) {
        body {
            padding: 10px; /* Further reduce padding on very small screens */
        }

        .card {
            padding: 1.8rem; /* Further reduce card padding */
        }

        .card h2 {
            font-size: 1.5rem;
        }

        .card p {
            font-size: 0.9rem;
            margin-bottom: 1.2rem;
        }

        .input-group label {
            font-size: 0.9rem;
        }

        .input-group input, .btn {
            font-size: 1rem;
            padding: 0.8rem 1rem;
        }

        .btn {
            font-size: 1.05rem;
        }

        .otp-inputs input {
            width: 30px;
            height: 35px;
            font-size: 1.2rem;
        }

        #logs {
            padding: 1.8rem;
        }

        #logs h3 {
            font-size: 1.7rem;
        }

        #logs .filter input,
        #logs .filter select,
        #logs .filter button {
            padding: 7px 11px;
            font-size: 0.9rem;
        }

        #logs th, #logs td {
            padding: 12px 15px;
            font-size: 0.85rem;
        }
    }


/* The main container for the "Delivery Method" label and the toggle buttons */
.input-group:has(input[type="radio"][name="mode"]) {
    display: flex;
    align-items: center;
    margin-bottom: 2rem; /* Consistent spacing below the toggle */
    position: relative; /* Crucial for positioning pseudo-elements */
    padding: 0;

    /* Max width for the entire toggle area to prevent it from stretching indefinitely */
    /* Adjust this value based on your overall form/page width */
    max-width: 600px; /* Example: Constrain the overall width */
    width: 100%; /* Make it take full width up to max-width */

    /* Custom property for the horizontal offset of the toggle track/slider. */
    /* This value is an ESTIMATE and still needs fine-tuning for initial alignment. */
    --toggle-offset: 175px; /* Adjust based on your "Delivery Method" label width */

    /* Add a min-width to prevent the toggle from collapsing too much on very small screens */
    min-width: 390px; /* Adjust if your elements become too small */
}

/* Style for the initial "Delivery Method" label */
.input-group:has(input[type="radio"][name="mode"]) > label:first-child {
    flex-shrink: 0; /* Prevent this label from shrinking */
    margin-right: 15px; /* Space between this label and the actual toggle visual */
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    transform: none;
    color: #2d3f50;
    font-weight: 700;
    font-size: 1.05rem;
    z-index: 3;
    /* Allow the label text to wrap if necessary on smaller screens */
    white-space: normal;
    text-align: left; /* Ensure text alignment is consistent */
    /* Set a flexible base width, but allow it to shrink */
    flex-basis: 150px; /* Example base width for the label */
}

/* Hide the actual radio input elements */
.input-group input[type="radio"][name="mode"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Styling for the individual toggle segments (the "SMS" and "WhatsApp" labels) */
.input-group label:has(input[type="radio"][name="mode"]) {
    flex-grow: 1; /* Allow each segment to take equal available space */
    /* Remove max-width here, let flex-grow handle distribution within the available space */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    border-radius: 12px;
    color: #4a4a4a;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    /* Ensure text doesn't overflow its label segment on smaller screens */
    white-space: nowrap; /* Keep SMS/WhatsApp on one line if possible */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}

/* The visual **toggle track** (the light blue background behind the slider) */
.input-group:has(input[type="radio"][name="mode"])::before {
    content: '';
    position: absolute;
    /* Dynamically calculate left position relative to the available width */
    /* We need to push it right past the "Delivery Method" label */
    left: var(--toggle-offset); /* This value still needs to be precise */
    right: 0; /* Let it fill the remaining space to the right of the label */
    top: 50%;
    transform: translateY(-50%);
    /* Use dynamic width: occupy space from --toggle-offset to the right edge */
    width: calc(100% - var(--toggle-offset)); /* Take all available width */
    height: 48px;
    background-color: #e0ecf7;
    border-radius: 25px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 0;
    /* Add overflow hidden to the track itself if labels extend beyond it */
    overflow: hidden;
}

/* The **moving slider thumb** (the orange active part) */
.input-group:has(input[type="radio"][name="mode"])::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Calculate width based on the actual available track width, divided by 2 */
    width: calc((100% - var(--toggle-offset) - 6px) / 2); /* Half of track width, minus some padding */
    height: 42px;
    background: linear-gradient(145deg, #ff8c42, #e07b36);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.35);
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1;
}

/* Move the slider when SMS is checked */
.input-group:has(input[type="radio"][value="sms"]:checked)::after {
    left: calc(var(--toggle-offset) + 3px); /* Track's start + small internal padding */
}

/* Move the slider when WhatsApp is checked */
.input-group:has(input[type="radio"][value="wa"]:checked)::after {
    left: calc(var(--toggle-offset) + 3px + var(--slider-width-half-minus-padding)); /* Track's start + padding + half track width */
}

/* Define a new custom property for the half-width of the slider for cleaner calculation */
.input-group:has(input[type="radio"][name="mode"]) {
    --slider-width-half-minus-padding: calc((100% - var(--toggle-offset) - 6px) / 2 + 0px);
    /* The 0px can be adjusted if there's a small gap needed between slider sections */
}

/* Adjust text color of labels when they are active */
.input-group input[type="radio"][value="sms"]:checked + label {
    color: #fff;
}

.input-group input[type="radio"][value="wa"]:checked + label {
    color: #fff;
}

/* Optional: Hover effect for the overall toggle area */
.input-group:has(input[type="radio"][name="mode"]):hover::before {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}
.input-group:has(input[type="radio"][name="mode"]):hover::after {
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.45);
}

/* --- Media Queries for Responsiveness (Crucial for preventing overflow) --- */

@media (max-width: 768px) {
    .input-group:has(input[type="radio"][name="mode"]) {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align to the start when stacked */
        padding: 10px; /* Add some padding to the group */
        max-width: 100%; /* Allow it to take full width */
        min-width: unset; /* Remove min-width when stacked */
        --toggle-offset: 0; /* Reset offset as elements are stacked */
    }

    .input-group:has(input[type="radio"][name="mode"]) > label:first-child {
        margin-right: 0;
        margin-bottom: 15px; /* Space below the label */
        font-size: 1rem;
        flex-basis: auto; /* Let it size naturally */
        width: 100%; /* Take full width when stacked */
    }

    /* Adjust the track and slider for vertical layout */
    .input-group:has(input[type="radio"][name="mode"])::before {
        /* Position relative to the *end* of the first label when stacked */
        left: 5px; /* Small padding from left edge */
        right: 5px; /* Small padding from right edge */
        width: auto; /* Auto width to fill container */
        height: 48px; /* Maintain height */
        top: auto; /* Reset top positioning */
        bottom: 5px; /* Position at the bottom of the group */
        transform: none; /* Remove transform */
        /* Make it span the entire width minus padding */
        width: calc(100% - 10px);
    }

    .input-group:has(input[type="radio"][name="mode"])::after {
        left: 8px; /* Small padding from left edge */
        width: calc((100% - 16px) / 2); /* Half width of container minus some padding */
        height: 42px; /* Maintain height */
        top: auto; /* Reset top positioning */
        bottom: 8px; /* Position relative to the bottom of the group */
        transform: none; /* Remove transform */
    }

    /* Adjust slider movement for stacked layout */
    .input-group:has(input[type="radio"][value="sms"]:checked)::after {
        left: 8px; /* Start at left */
    }

    .input-group:has(input[type="radio"][value="wa"]:checked)::after {
        left: calc(50% + 4px); /* Move to the right half. 4px is half of 8px padding */
    }

    /* Ensure labels inside the toggle also flex correctly */
    .input-group label:has(input[type="radio"][name="mode"]) {
        width: 50%; /* Each label takes half the width of the toggle track */
        padding: 10px 5px; /* Adjust padding */
        font-size: 0.95rem; /* Slightly smaller font */
    }
    /* Position the labels directly above the track/slider for touchability */
    .input-group label:nth-of-type(2) { /* SMS label */
        position: absolute;
        top: auto;
        bottom: 5px; /* Align to the bottom of the group */
        left: 5px; /* Match track padding */
        width: calc((100% - 10px) / 2);
        height: 48px;
        z-index: 2; /* Keep above track */
    }
    .input-group label:nth-of-type(3) { /* WhatsApp label */
        position: absolute;
        top: auto;
        bottom: 5px; /* Align to the bottom of the group */
        right: 5px; /* Match track padding */
        width: calc((100% - 10px) / 2);
        height: 48px;
        z-index: 2; /* Keep above track */
    }
}

/* Optional: Additional media query for very small screens if needed */
@media (max-width: 480px) {
    .input-group:has(input[type="radio"][name="mode"]) {
        padding: 5px;
    }

    .input-group:has(input[type="radio"][name="mode"]) > label:first-child {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .input-group:has(input[type="radio"][name="mode"])::before {
        height: 40px;
        left: 5px;
        right: 5px;
    }

    .input-group:has(input[type="radio"][name="mode"])::after {
        height: 34px;
        left: 8px;
    }

    .input-group label:has(input[type="radio"][name="mode"]) {
        font-size: 0.85rem;
        padding: 8px 0;
    }
    .input-group label:nth-of-type(2),
    .input-group label:nth-of-type(3) {
        height: 40px; /* Adjust height for labels */
    }
}

/* Turn the checked toggle’s label text to white */
/* Turn the label text white when its radio is checked */
.input-group label:has(input[type="radio"][name="mode"][value="sms"]:checked),
.input-group label:has(input[type="radio"][name="mode"][value="wa"]:checked) {
  color: #fff;
}


#subtitle {
    display: none !important;
}

/* === IMPROVED CSS for "Resend OTP" Button and "Go Back" Link === */

/* --- General .link class styling --- */
.link {
    font-size: 1rem; /* Consistent font size */
    font-weight: 600; /* Slightly bolder for prominence */
    color: #4a90e2; /* A modern, soft blue for links */
    text-decoration: none; /* Remove default underline initially */
    cursor: pointer; /* Indicate clickability */
    transition: all 0.25s ease-in-out; /* Smooth transitions for hover effects */
    display: inline-flex; /* Use flex for potential icon/text alignment */
    align-items: center; /* Vertically align content */
    gap: 5px; /* Space between text and arrow/icon */
    margin-left: 20px;
}

.link:hover {
    /* color: #357bd8; Slightly darker blue on hover */
    text-decoration: underline; /* Underline on hover for classic link feel */
    text-underline-offset: 3px; /* Lift the underline slightly */
}

.link:active {
    color: #2a6bbd; /* Even darker blue on active/click */
    transform: translateY(1px); /* Subtle press effect */
}

/* --- Specific Button (.link) Styling: "Resend OTP" --- */
button.link {
    /* Reset default button styles first */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent; /* Start with transparent background */
    padding: 0; /* Reset default padding */
    margin: 0; /* Reset default margin */

    /* Apply button-specific styles */
    padding: 10px 18px; /* Generous padding for a clickable area */
    border-radius: 8px; /* Rounded corners for a softer look */
    background: linear-gradient(145deg, #ff8c42, #e07b36); /* Orange gradient as seen in toggle */
    color: #fff; /* White text for contrast */
    font-weight: 700; /* Bolder text for buttons */
    box-shadow: 0 4px 10px rgba(255, 140, 66, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.15); /* Soft shadow for depth */
    letter-spacing: 0.5px; /* Slightly spaced letters */
    text-transform: uppercase; /* Uppercase for a more action-oriented look */
    font-size: 0.9rem; /* Slightly smaller font for uppercase text */
    min-width: 120px; /* Ensure a minimum width */
    justify-content: center; /* Center text within the button */
}

button.link:hover {
    background: linear-gradient(145deg, #e07b36, #ff8c42); /* Reverse gradient on hover for subtle animation */
    box-shadow: 0 6px 15px rgba(255, 140, 66, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.2); /* Stronger shadow on hover */
    transform: translateY(-2px); /* Slight lift on hover */
    text-decoration: none; /* No underline on button hover */
}

button.link:active {
    background: linear-gradient(145deg, #cc6b2e, #c76f2f); /* Darker gradient on active */
    box-shadow: 0 2px 5px rgba(255, 140, 66, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Flatter shadow on active */
    transform: translateY(0); /* Return to original position */
}

/* --- Specific Link (.link) Styling: "Go Back" --- */
a.link {
    font-weight: 600; /* Consistent font weight with other links */
    /* If you want an arrow, you'd add it here using a pseudo-element or SVG */

}

/* Example for "Go Back" arrow (adjust Unicode or replace with SVG icon) */
a.link::before {
    content: '←'; /* Unicode left arrow */
    margin-right: 5px; /* Space between arrow and text */
    font-size: 1.1em; /* Make arrow slightly larger */
    line-height: 1; /* Align arrow vertically */
    transition: transform 0.25s ease-in-out;
}

a.link:hover::before {
    transform: translateX(-3px); /* Subtle arrow animation on hover */
}








/* === LOGIN STYLES === */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  

}

.login-card {
  display: flex;
  /* width: 1200px;
  height: 600px; */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  font-family: sans-serif;
 
}

.login-left {
  background-color: #f0f0f0;
  color: #23465D !important;
  padding: 40px;
  width: 50%;
  text-align: center;
  font-weight: 900 !important;
}

.login-left h1 {
  font-weight: 900;
}

.login-left .login-logo {
  width: 300px;
  margin-bottom: 20px;
}

.login-left h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.login-left p {
  font-size: 14px;
  color: #334155;
}

.login-right {
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-right h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #23465D;
  font-weight: 800;
}

.login-right p {
  font-size: 14px;
  margin-bottom: 20px;
  color: #64748b;
}

.login-right input {
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.login-right button {
  padding: 12px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.login-right button:hover {
  background-color: #2563eb;
}

.office-boy{
  width: 500px;
  margin-top: 50px;;
}

@media screen and (max-width: 878px) {
  .login-card {
    flex-direction: column;
    align-items: center;
  }
.login-left {
  width:100%
}
.login-right {
  width: auto;
}
  
  
}

@media screen and (max-width: 605px) { 
.login-card {
  width: 100vw;
}

.office-boy{
  width: 100vw;
  margin-top: 50px;;
}


}