/* Commutes Widget — UM SPOT Dark Theme */
.commutes{align-content:stretch;color:#e8f1f0;display:flex;flex-direction:column;flex-wrap:wrap;font-family:"Inter",system-ui,sans-serif;height:480px;min-height:320px;min-width:320px;overflow:hidden;width:100%;border-radius:16px;border:1px solid rgba(45,212,191,0.15);background:rgba(10,13,22,0.85);backdrop-filter:blur(12px)}
.commutes-info{flex:0 0 120px;max-width:100%;overflow:visible}
.commutes-initial-state{border-radius:0;border-bottom:1px solid rgba(45,212,191,0.12);display:flex;height:108px;padding:0 20px;align-items:center;background:rgba(10,13,22,0.6);position:relative;z-index:5}
.commutes-initial-state svg{align-self:center;flex-shrink:0}
.commutes-initial-state .description{align-self:center;flex-grow:1;padding:0 16px}
.commutes-initial-state .description .heading{font:600 18px/24px "Inter",system-ui,sans-serif;margin:0;color:#e8f1f0}
.commutes-initial-state .description p{color:rgba(238,241,247,0.5);font:300 12px/18px "Inter",system-ui,sans-serif;margin:4px 0 0}
.commutes-initial-state .add-button{align-self:center;background:linear-gradient(120deg,#2dd4bf,#14b8a6);border:none;border-radius:8px;color:#050d0a;cursor:pointer;display:inline-flex;fill:#050d0a;padding:12px 24px 12px 14px;white-space:nowrap;font-weight:600;font-size:14px;transition:box-shadow .3s;box-shadow:0 4px 16px -4px rgba(45,212,191,0.4);position:relative;z-index:10;min-height:48px;min-width:120px}
.commutes-initial-state .add-button:hover{box-shadow:0 8px 24px -4px rgba(45,212,191,0.55)}
.commutes-initial-state .add-button svg{pointer-events:none}
.commutes-initial-state .add-button .label{font:600 13px/20px "Inter",system-ui,sans-serif;padding-left:8px}
@media(max-width:535px){.commutes-initial-state svg{display:none}.commutes-initial-state .description{padding-left:0}.commutes-initial-state .description .heading{font-weight:600;font-size:14px;line-height:20px}}
.commutes-destinations{display:none;position:relative;width:100%}
.commutes-destinations:hover .visible{display:block}
.commutes-destinations .destinations-container{display:flex;overflow-x:auto;padding:8px 8px 4px 8px;white-space:nowrap;width:100%;gap:8px}
.commutes-destinations .destinations-container::-webkit-scrollbar{display:none}
.commutes-destinations .destination-list{display:flex;gap:8px}
.commutes-destinations .right-control,.commutes-destinations .left-control{background:rgba(10,13,22,0.9);border-radius:40px;border-style:none;bottom:35px;box-shadow:0 2px 8px rgba(0,0,0,0.4);cursor:pointer;fill:#9ca5af;height:36px;padding:6px;position:absolute;width:36px;z-index:100;border:1px solid rgba(45,212,191,0.12)}
.commutes-destinations .right-control:hover,.commutes-destinations .left-control:hover{background:rgba(45,212,191,0.12);fill:#2dd4bf}
.commutes-destinations .left-control{left:12px}
.commutes-destinations .right-control{right:12px}
.commutes-destinations .add-button{align-items:center;background:rgba(45,212,191,0.08);border-radius:8px;border:1px dashed rgba(45,212,191,0.25);color:#2dd4bf;cursor:pointer;display:flex;flex-direction:column;flex-grow:1;font-weight:600;gap:4px;justify-content:center;min-width:140px;padding:16px 14px;transition:.3s}
.commutes-destinations .add-button:hover{background:rgba(45,212,191,0.15);border-color:rgba(45,212,191,0.4)}
.commutes-destinations .destination-container{cursor:pointer;display:flex;flex:1 1 0;position:relative}
.commutes-destinations .destination{border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.3);color:rgba(238,241,247,0.7);fill:rgba(238,241,247,0.7);height:72px;justify-content:space-between;margin-right:0;min-width:220px;overflow:hidden;padding:12px;position:relative;width:100%;border:1px solid rgba(45,212,191,0.1);background:rgba(255,255,255,0.03);transition:.3s}
.commutes-destinations .active:after{background:linear-gradient(90deg,#2dd4bf,#14b8a6);content:'';display:block;height:3px;left:0;position:absolute;top:0;width:100%}
.commutes-destinations .active+.destination-controls .directions-button{fill:#2dd4bf}
.commutes-destinations .active+.destination-controls .edit-button{opacity:1}
.commutes-destinations .active .metadata .location-marker{background:rgba(45,212,191,0.15);color:#2dd4bf}
.commutes-destinations .destination-container:hover,.commutes-destinations .destination-container:focus-within{background:rgba(45,212,191,0.04)}
.commutes-destinations .destination-container:hover .edit-button,.commutes-destinations .destination-container:focus-within .edit-button{opacity:1}
.commutes-destinations .destination .destination-content{font-size:12px;line-height:20px;overflow:hidden}
.commutes-destinations .destination .metadata{align-items:center;display:flex;margin-bottom:4px;gap:4px}
.commutes-destinations .destination-container svg{height:16px;width:16px}
.commutes-destinations .destination .location-marker{background:rgba(255,255,255,0.08);border-radius:8px;color:rgba(238,241,247,0.6);display:inline-block;font-size:13px;font-weight:700;line-height:16px;text-align:center;width:16px}
.commutes-destinations .destination .address{margin-bottom:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(238,241,247,0.5)}
.commutes-destinations .destination .address abbr{text-decoration:none}
.commutes-destinations .destination .destination-eta{color:#e8f1f0;font-weight:700;font-size:20px;line-height:26px}
.commutes-destinations .destination-container .destination-controls{align-items:flex-end;display:flex;flex-direction:column;min-width:60px;position:absolute;right:16px;text-align:right;top:12px;white-space:nowrap}
.commutes-destinations .destination-container .directions-button{align-items:center;background:rgba(10,13,22,0.8);border-radius:32px;border:1px solid rgba(45,212,191,0.2);cursor:pointer;display:flex;fill:rgba(238,241,247,0.5);height:30px;justify-content:center;margin:0;width:30px;transition:.3s}
.commutes-destinations .destination-container .directions-button:hover{background:rgba(45,212,191,0.12);fill:#2dd4bf;border-color:rgba(45,212,191,0.4)}
.commutes-destinations .destination-container .edit-button{background:rgba(10,13,22,0.8);border-radius:16px;border:1px solid rgba(45,212,191,0.2);opacity:0;font-size:12px;font-weight:600;line-height:20px;margin:6px 0 0;padding:2px 10px 2px 4px;fill:rgba(238,241,247,0.5);color:rgba(238,241,247,0.5);cursor:pointer;transition:.3s}
.commutes-destinations .destination-container .edit-button svg{display:inline-block;font-size:16px;line-height:16px;width:16px;vertical-align:middle}
.commutes-destinations .destination-container .edit-button:hover{background:rgba(45,212,191,0.12);color:#2dd4bf}
.commutes-map{flex:1;overflow:hidden;position:relative;width:100%}
.commutes-map .map-view{background-color:#1a1f2e;height:100%;left:0;position:absolute;top:0;width:100%}
/* Modal */
.commutes-modal-container{align-items:center;background-color:rgba(0,0,0,0.6);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000;backdrop-filter:blur(4px)}
.commutes-modal{background:rgba(10,13,22,0.96);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.5);height:280px;position:absolute;width:380px;border:1px solid rgba(45,212,191,0.15)}
.commutes-modal .content{padding:24px 24px 8px;display:flex;flex-direction:column;gap:16px}
.commutes-modal .heading{font:600 20px/28px "Inter",system-ui,sans-serif;margin:0;color:#e8f1f0}
.commutes-modal input[type="text"]{font:15px/22px "Inter",system-ui,sans-serif;padding:12px 14px;box-sizing:border-box;width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(45,212,191,0.2);border-radius:8px;color:#e8f1f0;outline:none;transition:.3s}
.commutes-modal input[type="text"]:focus{border-color:rgba(45,212,191,0.5);box-shadow:0 0 0 3px rgba(45,212,191,0.08)}
.commutes-modal input[type="text"]::placeholder{color:rgba(238,241,247,0.3)}
.commutes-modal .error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3)}
.commutes-modal .error-message{color:#ef4444;display:inline-block;font:12px/16px "Inter",system-ui,sans-serif;margin:0 0 4px}
.commutes-modal .travel-modes{display:flex;flex-direction:row;height:44px;margin-bottom:8px;padding:0;width:100%;gap:4px}
.commutes-modal .travel-modes [type=radio]{height:0;opacity:0;position:absolute;width:0}
.commutes-modal .travel-modes label{align-items:center;border:1px solid rgba(45,212,191,0.12);cursor:pointer;display:inline-flex;fill:rgba(238,241,247,0.4);flex:1;justify-content:center;padding:6px;position:relative;transition:background .3s,fill .3s;border-radius:8px}
.commutes-modal .travel-modes label:hover{background:rgba(45,212,191,0.06)}
.commutes-modal .travel-modes svg{height:22px;width:22px}
.commutes-modal .travel-modes .left-label{border-radius:8px}
.commutes-modal .travel-modes .right-label{border-radius:8px}
.commutes-modal .travel-modes input[type=radio]:checked+label{background:rgba(45,212,191,0.12);fill:#2dd4bf;border-color:rgba(45,212,191,0.3)}
.commutes-modal .travel-modes input[type=radio]:focus-visible+label{outline:2px solid #2dd4bf;outline-offset:-2px}
.commutes-modal .modal-action-bar{display:flex;justify-content:flex-end;gap:8px}
.commutes-modal .modal-action-bar button{background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:600;line-height:32px;border-radius:6px;padding:4px 14px;transition:.3s}
.commutes-modal .modal-action-bar .delete-destination-button{color:#ef4444;position:absolute;left:24px}
.commutes-modal .modal-action-bar .delete-destination-button:hover{background:rgba(239,68,68,0.1)}
.commutes-modal .modal-action-bar .cancel-button{color:rgba(238,241,247,0.4)}
.commutes-modal .modal-action-bar .cancel-button:hover{background:rgba(255,255,255,0.05)}
.commutes-modal .modal-action-bar .add-destination-button,.commutes-modal .modal-action-bar .edit-destination-button{color:#2dd4bf}
.commutes-modal .modal-action-bar .add-destination-button:hover,.commutes-modal .modal-action-bar .edit-destination-button:hover{background:rgba(45,212,191,0.1)}
.commutes-modal .modal-action-bar .add-destination-button:disabled,.commutes-modal .modal-action-bar .edit-destination-button:disabled{opacity:0.5;cursor:not-allowed}
.hide{display:none}
/* Origin pin label override for dark theme */
.origin-pin-label{font-weight:700!important}
/* Mobile touch support */
.commutes-initial-state .add-button,
.commutes-destinations .add-button,
.commutes-modal .modal-action-bar button,
.commutes-modal .travel-modes label,
.commutes-destinations .destination-container .directions-button,
.commutes-destinations .destination-container .edit-button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(45,212,191,0.2);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
/* Modal mobile fixes — body overflow:hidden sorunu icin */
.commutes-modal-container{
  position:fixed!important;
  inset:0;
  height:100vh!important;
  height:100dvh!important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Responsive */
@media(max-width:480px){
.commutes{height:400px;min-height:280px;border-radius:12px}
.commutes-initial-state{padding:0 14px;height:90px}
.commutes-initial-state .description .heading{font-size:14px}
.commutes-initial-state .add-button{padding:10px 16px 10px 12px;font-size:13px;min-height:44px}
.commutes-modal{width:calc(100% - 32px);height:auto;padding-bottom:16px}
.commutes-modal .content{padding:20px 20px 8px}
.commutes-modal .travel-modes label{min-height:44px}
.commutes-modal .modal-action-bar button{min-height:44px;min-width:44px}
}