/* Tablet Responsive Styles - Only applies to tablet devices */
/* This file should be loaded conditionally for tablet devices only */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Tablet font size adjustment */
  body {
    font-size: 15px !important;
  }

  /* Tablet main container */
  .main-container {
    padding: 1rem 0.75rem !important;
    max-width: 100% !important;
  }

  /* Hero Section Tablet Optimization */
  .hero-section {
    padding: 1.5rem 0.75rem !important;
  }

  .timezone-converter-heading {
    font-size: 1.8rem !important;
    text-align: center !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    text-align: center !important;
    margin-bottom: 1.25rem !important;
  }

  /* Converter section tablet */
  .converter-section {
    padding: 1.25rem 0.75rem !important;
  }

  .converter-header h1,
  .converter-header h2 {
    font-size: 1.3rem !important;
    text-align: center !important;
  }

  /* Two column layout for tablet */
  .converter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  /* World clock tablet layout */
  .world-clocks-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
  }

  .world-clock-card {
    padding: 1rem !important;
  }

  /* Hero quick links tablet layout */
  .hero-quick-links-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  .quick-link {
    padding: 0.75rem 0.6rem !important;
    font-size: 0.8rem !important;
  }

  /* Timezones grid tablet layout */
  .timezones-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1rem !important;
  }

  /* Ensure proper center alignment for headings */
  h1,
  h2,
  h3 {
    text-align: center !important;
  }

  /* Tablet button sizing */
  .add-btn {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.95rem !important;
    min-height: 48px !important;
  }

  /* Time input group tablet sizing */
  .time-input-group {
    padding: 1rem !important;
  }

  .time-input-group label {
    font-size: 0.95rem !important;
    text-align: center !important;
  }

  /* Conversion result tablet sizing */
  .conversion-result {
    padding: 1.25rem !important;
  }

  .result-time {
    font-size: 2rem !important;
  }

  /* Hero converter container tablet */
  .hero-converter-container {
    gap: 1.5rem !important;
    padding: 0 0.75rem !important;
  }

  /* Simple converter tablet */
  .simple-converter {
    padding: 1.25rem !important;
  }

  /* Timezone select groups tablet */
  .timezone-select-group {
    padding: 0.75rem !important;
  }

  .timezone-select-group label {
    font-size: 0.9rem !important;
    text-align: center !important;
  }

  /* Time selector tablet */
  .time-selector-section {
    padding: 1rem !important;
  }

  .time-selector-header {
    gap: 1rem !important;
  }

  .time-selector-header label {
    font-size: 1.1rem !important;
    text-align: center !important;
  }

  /* World Clock Control Buttons Tablet Styles */
  .world-clock-controls {
    gap: 0.75rem !important;
    justify-content: center !important;
  }

  .controls-right {
    gap: 0.75rem !important;
  }

  .bulk-btn {
    padding: 0.5rem !important;
    font-size: 0.8rem !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .format-toggle-btn {
    width: 54px !important;
    height: 26px !important;
  }

  .toggle-btn {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    gap: 0.4rem !important;
  }

  .toggle-btn i {
    font-size: 0.7rem !important;
  }

  .add-clock-btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
    min-height: 38px !important;
    gap: 0.5rem !important;
  }

  .add-clock-btn i {
    font-size: 0.8rem !important;
  }

  /* Analog Clock Tablet Fixes */
  .analog-clock {
    width: 130px !important;
    height: 130px !important;
  }

  .hour-hand {
    width: 2.8px !important;
    height: 38px !important;
    left: 63.6px !important; /* (130px - 2.8px) / 2 = 63.6px */
    top: 26px !important; /* fine-tuned for alignment */
  }

  .minute-hand {
    width: 1.8px !important;
    height: 48px !important;
    left: 64.1px !important; /* (130px - 1.8px) / 2 = 64.1px */
    top: 16px !important; /* fine-tuned for alignment */
  }

  .second-hand {
    width: 1px !important;
    height: 54px !important;
    left: 64.5px !important; /* (130px - 1px) / 2 = 64.5px */
    top: 8px !important; /* moved up 3px from 11px */
  }

  .analog-clock::before {
    width: 9px !important;
    height: 9px !important;
  }
}